Hello Artisan,
You know that Laravel has been released Vite for compiling your assets. You know that Vite is a frontend build tool that provides an extremely powerful and fast development environment and bundles your code for production. When building applications with Laravel, we will use Vite to bundle your application's CSS and JavaScript files into production-ready assets.
So in this tutorial, I will show you how we can install vue js 3 in Laravel 9 application with Vite. If you don't know how to install that, then you are a right place. After completing this post, you’ll be able to create a Vue 3 and Laravel 9 application powered by Vite.
Let's see the example step of installing vue 3 with Laravel 9 powered by Vite:
Step 1: Install Laravel 9
In this step, we will install a fresh Laravel application. Run the below command to install:
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue3-vite
Step 2: Install NPM
Run the following command to install frontend dependencies:
npm install
Step 3: Install Vue 3
Now after installing node modules we need to install vue 3 in our application by the following command:
npm install vue@next vue-loader@next
Now install the following vite packages:
npm i @vitejs/plugin-vue
Now we have to update vite.config.js
file like the below:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Now run the below command to compile our assets.
npm run dev
Step 4: Create Vue 3 App
In this step, we will create a vue 3 application. So create it like below:
resources/js/app.js
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Step 5: Create Vue 3 Component
In this step, we will create vue 3 components. So create it like below:
Step 6: Update Master File
Now in this step, we have to set up our blade master file. So update it like this:
Read also: Vuex Complete Guide with Axios Api Call in Vue Js
Now run php artisan serve
and test. Everything is set to go.
#laravel #laravel-9x #vite-laravel #vue-js