Laravel Ui Package Setup In Laravel 8 With Vue 3 - FreeCodeBlog

Last updated: Nov 20, 2021

Want to use vue 3 in laravel ui? Laravel ui is a first party user authentication package and you can easily use it with laravel 8 and vue 3. So let's start using the laravel UI package in laravel 8 with vue 3.

 

Laravel Ui Package Setup In Laravel 8 With Vue 3
Laravel Ui Package Setup In Laravel 8 With Vue 3.

 

I am going to use laravel 8 and vue 3 for this tutorial. laravel ui version 3 support laravel 8 and vue 2. So first I will install laravel ui version 3 on laravel 8 then I will upgrade from vue 2 to vue 3.

 

1. laravel Ui Package.

First you need to install laravel ui version 3 in laravel 8 project to use vue 3. So after successfully installing Laravel 8 you will need to install the Laravel UI 3 version package on your Laravel 8 project. Laravel UI is a new first-party package that brings out the UI part of a Laravel project in a separate laravel/ui package. read install laravel ui package in any kind of laravel version tutorial for more information.

 

Remember:  Laravel ui 3 version does not support vue 3. After successfully installing Laravel ui 3 you need to manually update vue 3 from vue 2.

 

2. Upgrade Vue Package File.

I hope you have installed laravel ui version 3 on laravel 8. Now you need to upgrade your laravel ui project from vue 2 to vue 3. First you need to change the vue package to upgrade from vue 3 to vue 2. Laravel ui 3 version is still using vue version "2.something". You need to use at least vue 3 "3.something" version in laravel ui 3 version.

 

/*
| remove vue 2 version
*/
"vue": "^2.5.17",
/*
| add vue 3 version
*/
"vue": "^3.2.20",

 

3. Upgrade Vue Compiler Package File.

If you want to use SFCs then you'll also need to install vue compiler package. Now you need to upgrade the vue compiler package. Laravel ui version 3 used vue-template-compiler 2 version for  vue 2 file compilation. Now you need to use @vue/compiler-sfc 3 version for vue 3 file compilation. So first remove the old vue 2 compiler package and add a new vue 3 compiler package for vue 3 file compilation in laravel ui.

 

/*
| remove vue 2 compiler
*/
"vue-template-compiler": "^2.6.10"
/*
| add vue 3 compiler
*/
"@vue/compiler-sfc": "^3.2.20",

 

Remember:  Make sure you have the same version of the vue 3 and vue compiler-sfc packages installed. If you do not install the same version of vue 3 and vue compiler, you may get an error while trying to run the npm dev command. For example, If you are installing vue “3.2.20” version, you must have the vue compiler version “3.2.20” installed otherwise you can get errors while vue 3 files compilation.

 

4. Add Vue Loader Package File.

Be sure to add vue loader package file for your laravel 8 and vue 3 project. laravel ui 3 does not use vue loader by default. Additionally you need to install the vue 3 loader package on the laravel ui project. To use the vue loader package on laravel 8 with laravel ui vue 3 you do not need to move any package files.

 

/*
| add vue 3 loader
*/
"vue-loader": "^16.8.2"

 

5. Vue 3 File Compilation.

Have you remove all vue 2 package files and added all vue 3 package files? Now you need to install and compile vue 3 files. If you don't know much about files complication then read how to compile laravel css and js files tutorial. If you get any error while files compilation then follow next steps to fix mix files compilation errors.

 

npm install
npm run dev

 

6. Solve Mix Compile Error.

You may get mix compilation error when you try to run npm run dev command. If you get laravel mix compilation error when you try to compile css & js file then please don't forget to use vue() in mix file.

 

/*
| webpack.mix.js file
*/
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css');

 

7. Solve Vue 3 Compile Error.

If you encounter a mismatch version error while compiling node js files, first remove the vue 2 files from the package file, delete the second node_modules folder, and delete the third package-lock.json file. Now install vue 3, vue loader and vue compiler package files at once. The Vue 3 mismatch will be resolved after installing the same version of the vue 3 and vue 3 compile package file.

 

/*
| remove vue 2 files
*/
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
/*
| install vue 3 files
*/
npm i --save-dev vue@next vue-loader@next @vue/compiler-sfc

 

8. Use Vue 3 Components File.

Have you solved all the errors? Are you ready to use vue 3 in laravel 8 ui 3? Now you can easily use vue 3 package files and components in laravel 8 ui 3 project. First remove vue 2 files configuration from app js file, Second add vue 3 file configuration in app js file.

 

/*
| app.js file
*/
require('./bootstrap');
import {createApp} from 'vue';
const app = createApp({});
app.component('example-component', require('./components/ExampleComponent.vue').default);
app.mount("#app");

 

I hope this tutorial helps you to setup vue3 with laravel ui. I didn't explain to you how we can install Tailwind CSS in Laravel. if you want to know how to install tailwind css in laravel then read install tailwind css in laravel with laravel ui tutorial.

 

Thanks.

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Ckeditor 5 Mention With Vue Js Full Tutorial

Ckeditor 5 mention (@) with vue js! Really? Yes. You can easily develop mention (@) system in vue js using ckeditor 5. Just follow bellow step slow... Read More

Laravel 8 Email Notification Send To User When User Email Verified

In this tutorial we can learn how we can send a email when a user verified her email. We need to send email because email verified success email im... Read More

Make One To One Chat Application In Laravel With Vue Js

Today I will make a one to one chat application in laravel with vue js. To making one to one chat application use can easily use jetream user authe... Read More

Upgrade Laravel 5.8 To 8 Version Complete Tutorial

Want to upgrade laravel 5.8 to 8 version? Yes. Still using older Laravel versions like laravel 5.7, 5.8 or higher for your website? If you use a ve... Read More

Make Laravel User Authentication Using Laravel Ui In Laravel 8 With Vue 2

Install and use laravel ui package in laravel 8 with Vue 2 to make user authentication. Laravel UI is a new first-party package that extracts the U... Read More