Get your next remote job on LaraJobs.

Add Vue.js to any Laravel project

Table of contents:

Add Vue.js to any Laravel project

Introduction to Vue.js in Laravel

Vue.js is a JavaScript framework for building user interfaces.

While it’s flexible enough to be integrated into any web project (Rails, Symfony, WordPress, etc.), it’s one of the preferred choices of Laravel developers, especially when coupled to Inertia.js.

That being said, figuring out how to set up your bundling process while using a major JavaScript framework is insanely complicated.

Therefore, I decided to write this short guide that walks you through adding Vue.js to your Laravel project.

Install Vue.js in Laravel via NPM, Yarn, pnpm, or Bun

First, add Vue and the plugin that will enable a seemless integration with Vite (the default bundler used by Laravel).

If you are using NPM:

npm install vue @vitejs/plugin-vue

If you are using Yarn:

yarn add vue @vitejs/plugin-vue

Or if you are using Bun:

bun add vue @vitejs/plugin-vue

Configure Vite for Vue.js in Laravel

In the previous step, we added a crucial plugin that enables support for Vue in Vite. We now must make use of it.

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

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
})

Important: The alias from vue to vue.esm-bundler.js instructs Vite to use a version of Vue.js that also bundles the compiler which will allow us to write HTML instead of render() 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 import Vue and create a variable for the createApp() function.
  2. Then, we instantiate Vue by calling the function and store it in a constant called app (you will see later why).
  3. Finally, we mount our Vue.js application inside a #app element that we will create.

Now, do not forget to include your JavaScript using the @vite directive and create a <div> tag with an “app” ID in your HTML.

<!DOCTYPE html>
<html>
<head>
 
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app">
<!-- Vue.js components will be processed here. -->
</div>
</body>
</html>

Make sure Vue.js is operational

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

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

Register Counter.vue to let Vue know of its existence:

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

Then, call it in the div#app we set up earlier:

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

Compile your code

The only step left if to compile your code and preview the result in your browser.

If you are using NPM, run the following command:

npm run dev

If you are using Yarn:

yarn dev

Or if you are using Bun:

bun run dev

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

You’ve successfully added Vue.js to your Laravel project and you can now start having fun by building something amazing!

Benjamin Crozat

Written by Benjamin Crozat

Indie hacker, blogger, and AI enthusiast building things with the TALL stack. 🔥

Follow me on:

Recommended articles

A comprehensive guide to the Laravel UI package A comprehensive guide to the Laravel UI package

Leverage the laravel/ui package to scaffold your favorite frontend framework and authentication features.

Published on Nov 12, 2023

Add Alpine.js to any Laravel project Add Alpine.js to any Laravel project

Alpine.js is a great companion for a Laravel app. Let's see how you can add it in any project.

Published on Oct 13, 2023

The best web development courses available. Free and paid. The best web development courses available. Free and paid.

Looking to learn web development but don't know where to start? Check out our list of the best online paid and free platforms to get started!

Modified on Dec 20, 2022

Add Tailwind CSS to any Laravel project Add Tailwind CSS to any Laravel project

See how easy it is to add Tailwind CSS to any Laravel project and start building an amazing user interface.

Published on Oct 5, 2023

Alpine.js: a lightweight framework for productive developers Alpine.js: a lightweight framework for productive developers

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Published on Jan 26, 2023

Gold sponsors New

  • Wire Elements
    Beautiful handcrafted Livewire components.
    Check site
Your business here

Partners

If you buy from one of my partners below, I will be compensated at no cost to you. These are services I use or used, and 100% stand behind.

  • Scalable and reliable VPS hosting.
    Bonus: $200 of free credits
    Check site
  • The Google Analytics alternative without compromise.
    Free trial: 30 days
    Bonus: $10 off your first invoice
    Check site
  • Flare
    Track PHP and JavaScript errors in one place.
    Free trial: 10 days
    Check site
  • Keep track of your Google rankings.
    Free trial: 7 days
    Promo code: WELCOME30
    Check site
- / -