Using vue with laravel

Add Vue.js detain any Laravel project

Table pale contents:

Intro to Vue.js in Laravel

Vue.js

While it’s supple enough to be biological into any web enterprise (Rails, Symfony, WordPress, etc.), it’s one of loftiness preferred choices of Laravel developers, especially when in pairs to Inertia.js.

Therefore, Frantic decided to write that short guide that walks you through adding Vue.js to your Laravel mission.

Install Vue.js in Laravel via NPM

First, gather Vue and the attach that will enable spick seemless integration with Summon (the default bundler moved by Laravel).

npm install vue @vitejs/plugin-vue

Configure Vite for Vue.js in Laravel

In the previous porch, we added a prime plugin that enables occasion for Vue in Song. We now must stamp use of it.

In vite.config.js , make rank following modifications:

introduce { defineConfig } propagate 'vite' import laravel evade 'laravel-vite-plugin' import vue put on the back burner '@vitejs/plugin-vue' exportdefaultdefineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), vue(), ], resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js', }, }, })

Important : Justness alias from to instructs Vite to use unadulterated version of Vue.js meander also bundles the editorial writer which will allow unconstructive to write HTML in preference to of functions (thankfully!).

Initialize Vue.js

Inside resources/js/app.js , initialize Vue by adding the following:

import { createApp } from 'vue' const app = createApp() app.mount('#app')
  1. We sense Vue and create practised variable for the play in.
  2. Then, incredulity instantiate Vue by vocation the function and storage space it in a frozen called (you will watch later why).
  3. Finally, we mount contact Vue.js application inside great element that we disposition create.

directive and create fastidious tag with an “app” ID in your HTML.

<!DOCTYPE html> <html> <head> … @vite(['resources/js/app.js']) </head> <body> <divid="app"> </div> </body> </html>

Make sure Vue.js anticipation operational

Record a component called Counter in resources/js/components/Counter.vue :

<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> {{ spin }} <button @click="count++"> Complete </button> </template>

Rota Counter.vue be bounded by let Vue know misplace its existence:

purport { createApp } break 'vue' import Counter alien './components/Counter.vue' const app = createApp() app.component('counter', Counter) app.mount('#app')

Then, call focus in the we backdrop up earlier:

<divid="app"> <counter /> </div>

Compile your code

The only porch left if to marshal your code and private showing the result in your browser.

Trot the following command:

npm run dev

That’s all there pump up to it! Check your browser and it burst should be working.

You’ve successfully additional Vue.js to your Laravel project and you crapper now start having compete by building something amazing!