Vite upgrade app.js require / import

Level 102

Show the full updated example

I would assume it is something like

import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

const app = new Vue({
  el: '#app',
});

tykus

Level 104

This is not enough to globally register a Vue Component...

import ExampleComponent from './components/EventComponent.vue';

... what else have you done?

Level 10

Used the laravel shift, upgrade vite
followed tutorials https://balajidharma.medium.com/how-to-migrating-from-laravel-mix-to-vite-fbb912237844
checked laravel documentation for upgrade

Level 102

@TobiasS Show us the code please. Or compare with my example

Level 10

app.js

import './bootstrap';
import Vue from 'vue'

import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);

const app = new Vue({
    el: '#app',

});

example.blade.php

<x-app-layout>
    Test
    <example-component></example-component>
</x-app-layout>

Level 102

@TobiasS And if you open the browser console, are there errors ?

Level 10

No errors in console Vue dev-tools do not detect Vue

Level 102

@TobiasS How are you importing vite ? @vite(['something'])

Level 10

Inspecting HTML shows

Test

Level 10

yes in app-layout.blade.php

@vite('resources/js/app.js')

Level 102

@TobiasS Is the dev server running ? npm run dev

Level 10

I've built the assets npm run build

valet is serving the site

Level 102

@TobiasS Then check the dom to see if js file is included, and has content

Level 10

js file included build/assets/app.51fd922d.js

last row contains "div",{staticClass:"container"},[n._v(" Example VUE ")])},tO=[],nO=Jx(Zx,eO,tO,!1,null,null,null,null);const rO=nO.exports;Yt.component("example-component",rO);new Yt({el:"#app"});

Level 102

@TobiasS Can you show your vite config as well? I dont use vue myself so I cannot spot any mistakes in the vue code, but I assume its correct

Level 10

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            resolve: {
                alias: {
                    '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
                }
            },
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Level 102

@TobiasS Looks correct. Does the same happen if you run npm run dev ?

Best Answer

Level 102

And can you show the layout where you have the div with Id="app" ?