Vue 3 integration in laravel 9 Tutorial not working as it should-CodePudding

i made projects before using Laravel, however this time i decided to use Vue.js for my front End in my project and i was looking for some tutorials to see how i could integrate Vue.js on my Laravel project. I tried with several tutorials, so i will only talk about the last tutorial i tried

First i added dependencies, and my package.json file look like this

 "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.2.4"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^3.2.0",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1"
    }

I updated vite.config.js file to look like this

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

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

In resources/js i created a folder called components and inside it i created app.vue with the template i want to use for my first test

<template>
    <h1>Laravel 9 with Vue integration, with vite</h1>
</template>

in resources/js i updated my app.js to look like this

import './bootstrap';

import { CreateApp } from 'vue';

import app from './components/app.vue';


CreateApp(app).mount('#app');

and finally on my blade file welcome.blade.php i updated it like this

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        @vite('resources/css/app.css')
    </head>
    <body>
     <div id='app'></div>

     @vite('resources/js/app.js')
    </body>
</html>

After doing this, i made npm run dev and then the usual php artisan serve However the template i created on my app.vue file is not showing. I tried several tutorials and i am having the same issue. For curiosity, since i also used the @vite for css file on my blade file, i tried changing the color of the background in the css.file and that worked , so i have no idea why my template is not showing

Thank You in advance

UPDATE:

Found out that i am getting this error, when i inspect

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=d69a4051' does not provide an export named 'CreateApp' (at app.js:3:10)

And i am still trying to find a fix for this

CodePudding user response：

Found a fix for this (stupid one) My problem was in my app.js file

Of course CreateApp doesn't exist. By mistake i wrote with starting uppercase letter, but it is written as 'createApp'.