Laravel + Vue + Vuetify Installation

In this article, I will explain how to install and use the Vue.js library in the laravel project.

Step 1: Installing Laravel

First, download the Laravel installer using Composer:

composer global require laravel/installer
laravel new blog
(or)
composer create-project --prefer-dist laravel/laravel:^7.0 blog

Step 2: Installing Vue

While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.

composer require laravel/ui:^2.4
// Generate basic scaffolding...
php artisan ui vue
// Generate login / registration scaffolding...
php artisan ui vue --auth

Install Vue.js Dependencies,

npm install
npm run dev

Step 3: Install Vuetify

npm install vuetify

Create a plugin file for Vuetify, src/plugins/vuetify.js with the below content:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

If using vuetify-loader use the content below:

// src/app.js

import Vue from 'vue'
import vuetify from '../plugins/vuetify' // path to vuetify export
new Vue({
  vuetify,
}).$mount('#app')

Step 4: Run application

Below command will start a development server at http://localhost:8000:

php artisan serve

Note: Code available in Github, https://github.com/santhiyasugumar/laravel-vue-vuetify-installation.git