Не могу вывести глобальный компонент vue3 в blade вьюхе в проекте laravel 9.
У меня так:
Blade:
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<login-component></login-component>
</div>
</body>
...
package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^0.27",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.0.0"
},
"dependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"vue": "^3.2.36",
"vue-loader": "^17.0.0"
}
}
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
}
}
}),
],
});
resources/js/app.js
Не указываю rootComponent в createApp, т.к. он мне не нужен
import './bootstrap';
import {createApp} from "vue";
import LoginComponent from "./components/LoginComponent.vue";
const app = createApp({});
app.component('LoginComponent', LoginComponent)
app.mount('#app');
Сам компонент LoginComponent
<template>
login component
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
При таком раскладе компонент не выводится. Но если LoginComponent в app.js указать в createApp() таким образом
const app = createApp(LoginComponent);
, то выводится.
Что делаю не так? Делал по документации vue3 глобальных компонентов.
Средний