I have the following problem which repeats a lot to me when using Vue 3 and Laravel somewhere. I'm just getting started and have a virtually clean app and can still see this issue exist. Namely, Vuejs 3 from Laravel 8 do not work for me. I get an error in the console:
[Vue warn]: Failed to resolve component: app at app.js:13797
app.js
require('./bootstrap');
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp({App});
app.mount("#app");
App.vue
<template>
<h1>{{ greeting }}</h1>
</template>
<script>
export default {
setup: () => ({
greeting: 'Hello World from Vue 3!'
})
}
</script>
<style scoped>
</style>
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css', {}, [tailwindcss('./tailwind.config.js')])
.version();
welcome.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="app">
<app>
</app>
</div>
<script src="{{ url('js/app.js') }}"></script>
</body>
</html>
Please help me with this. :)
It should be
createApp(App), not{App}, which is a shorthand for{App: App}.