How to setup Laravel 9.2 Vite Spa together?

Since laravel is now using vite as front-end entry, I would like to use vite and vue to setup a SPA project like before. But , have encountered several problems:

http://localhost:3000 not working after running npm run dev , have no idea.
followed some tutorial to setup vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [
        laravel([
            // 'resources/css/app.css',
            'resources/js/app.js',
        ]),
        vue(),
    ],    
});

and app.js

import './bootstrap'
import '../css/app.css'

import { createApp } from 'vue'
import router from './routes'
const app = createApp({

})
app.use(router).mount('#app')

npm run dev launch laravel on *.test ( is only work on mac ? not so friendly on linux and windows ....) looks like vue-router never fired , only a blank page , also console is flashing

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".   at <App>

Any idea how to convert the old webpack way to new vite way ? Many thanks

drehimself

3 years ago

Best Answer

Level 35

Try

import { createApp } from 'vue/dist/vue.esm-bundler.js' // instead of from 'vue'

Generally, .test domains are if you're using Laravel Valet (which is only available on Mac). If you're not using Valet, you need to run your application server like you normally would whether it's php artisan serve, or using Docker/Sail.

MaverickChan

3 years ago

Level 47

@drehimself Thanks for the reply. After tried your solution , the warning disappeared , and vue-devtool can detect vue on the page. But , vue-router is not working now. The page is blank , no component is imported.

I did exactly like before , normal routes.js file , double checked spell, no warning info, no nothing.

I really doubt is vite should use a vue-router plugin in the vite.config.js file? --update: I checked the vue-devtool again , the route is working , i can see the route object with path , name, etc. But Home.vue is not mounted to #app.

Here is my routes.js file

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        component: () => import('../views/Home.vue'),
        name: 'Home'
    }
]
const router = createRouter({
    routes,
    history: createWebHistory()
})
export default router

Home.vue file

<template>
    <div>
        This is Home page
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

If you can help me through this issue Thanks!

drehimself

3 years ago

Level 35

You have to create a sort of "Root component" that has a <RouterView> to house all of your route views.

Here's a repo where I have client-side routing somewhat working: https://github.com/drehimself/laravel-vite-vue-spa

Far from perfect as server-side routing does not work (i.e. try to manually go to the /about page in the URL bar).

Is there anything stopping you from using Inertia with Vue? It already works great with Vite, checkout the Breeze docs for an example of how to scaffold it out.

If Inertia is out of the picture, I personally would go the separate repos route, with a repo for the backend (Laravel) and one for the frontend (Vue or Nuxt).

MaverickChan

3 years ago

Level 47

@drehimself OH! I am so dumb to forget that... Thanks again!

Please or to participate in this conversation.