Question 345597 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Larvale 10 with vite and vue-plugin does not show rendered component

I have a very basic installation of laravel 10 with vite und vue-plugin. Problem is, the vue-part of the page does render, but is not shown in browser, only the empty vue-block:

rendered output:

<div id="app_button" data-v-app=""><!----></div>

Here are my settings and the code:

package.conf

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.4",
        "autoprefixer": "^10.4.17",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0.0",
        "postcss": "^8.4.35",
        "sass": "^1.71.0",
        "tailwindcss": "^3.4.1",
        "vite": "^5.0.0"
    }
}

app.js

import './bootstrap';

import { createApp, ref } from 'vue'
createApp({
    setup() {
        return {
            count: ref(0)
        }
    }
}).mount('#app_button')

blade-view

<head>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app_button">
    <button @click="count++">
        Count is: @{{ count }}
    </button>
  </div>
</body>

vite.conf

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/css/app.css'
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

What am I missing herer? Thanks for any hint!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There was in fact a warning:

    [Vue warn]: Component provided template option but runtime compilation is 
not supported in this build of Vue. 
Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

    The element with id="app_button" was in a plain blade template and it seems that the standard configuration of laravel vite does not support runtime compilation. There has to be a single file component to make it work.


  2. 0

    It seems like there might be an issue with how the Vue app is being mounted in your Laravel project. Here are a few things you can check to troubleshoot the problem:

    1. Verify Vue Component Registration:
      Ensure that the Vue component is properly registered in your Vue app. Check if the component is imported and used correctly in your Vue setup.

    2. Check Vue Component Template:
      Review the Vue component template to make sure that the data binding and event handling are set up correctly. Double-check the usage of the count variable and the click event binding.

    3. Verify Vue Mounting Point:
      Confirm that the mounting point in your Blade view matches the ID used in the Vue app mount function. In your case, the mounting point should be #app_button.

    4. Check for Console Errors:
      Inspect the browser console for any errors that might provide more insight into what could be going wrong with the Vue rendering.

    By reviewing these points and making sure everything is set up correctly, you should be able to resolve the issue with the Vue part not rendering in the browser. Let me know if you need further assistance or if you have any specific error messages to share.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search