I am using Laravel 10 and have setup Laravel Breeze with Vue.
The Content inside my Vue Component is not visible. I have gone through lot of links and tutorials but none of it is different than what I have done.
Also there are no errors in the console.
Here is my setup and config files.
Composer.json
"require": {
"php": "^8.1",
"guzzlehttp/guzzle": "^7.2",
"laravel/breeze": "^1.23",
"laravel/framework": "^10.10",
"laravel/sanctum": "^3.2",
"laravel/tinker": "^2.8"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/pint": "^1.0",
"laravel/sail": "^1.18",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^7.0",
"phpunit/phpunit": "^10.1",
"spatie/laravel-ignition": "^2.0"
},
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
"@vitejs/plugin-vue": "^4.3.4",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.8.0",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"npm-watch": "^0.11.0",
"vue": "^3.2.36",
"vue-loader": "^17.2.2",
"vue-router": "^4.0.13"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
app.js
import './bootstrap';
import { createApp } from "vue";
import ExampleComponent from './components/Examplecomponent.vue'
createApp({
components: {
ExampleComponent,
}
}).mount('#app')
ExampleComponent.vue
<template>
<div>
this is example vue 3
</div>
</template>
welcome.blade.php
<body class="antialiased">
<h1>Hello</h1>
<div id="app">
hi...
<example-component></example-component>
</div>
</body>
After build in the browser, the webpage on inspect.
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="preload" as="style" href="http://127.0.0.1:8000/build/assets/app-993b5797.css"><link rel="modulepreload" href="http://127.0.0.1:8000/build/assets/app-12031083.js"><link rel="stylesheet" href="http://127.0.0.1:8000/build/assets/app-993b5797.css"><script type="module" src="http://127.0.0.1:8000/build/assets/app-12031083.js"></script> </head>
<body class="antialiased">
<h1>Hello</h1>
<div id="app" data-v-app=""><!----></div>
Not sure what I am missing and the vue component content is not displayed, also I don't see any errors in the console.
Ah.. Got it. What I was missing was from where the createApp function has to be imported.
this is the change that was required in app.js
Hope this helps some developer.