Laravel 9 Install Vue JS Example

Today we are going to learn on Laravel 9 Install Vue JS Example. This tutorial will cover how you can install Vue in laravel 9 with example.

Vue.js is an open-source model–view–view model front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Laravel UI provide a way to install bootstrap, Vue and React setup. Its also provide auth scaffold with login and register. Laravel UI provide easy way to work with bootstrap, Vue and React.

Steps for Laravel 9 Install Vue JS Example:

• Step 1: Installing fresh new Laravel 9 Application
• Step 2: Installing Laravel UI
• Step 3: Installing Vue
• Step 4: Installing Vue with Auth
• Step 5: Installing NPM
• Step 6: Testing
• Step 7: Conclusion

Also Read: React JS Image Upload using Vite in Laravel 9 Example

Step 1: Installing fresh new Laravel 9 Application

First, we are going to install a fresh new laravel 9 application. To install a laravel 9 application run the following command in terminal.

composer create-project laravel/laravel vuejs-app

cd vuejs-app

Note: “vuejs-app” is a laravel application name.

Step 2: Installing Laravel UI

So, let now install the laravel ui composer package. To install a laravel ui composer package run the following command in terminal.

composer require laravel/ui

Also Read: Create Custom Artisan Command Laravel 9 Example

Step 3: Installing Vue

There are two ways to install Vue. First one is simple vue and the other is Vue with auth. In this step we will install simple vue. Run the following command to install simple vue.

Install Vue

php artisan ui vue

Step 4: Installing Vue with Auth

Installing Vue with auth is the other way to install a Vue with auth. If you want Vue with auth install the following command.

Install Vue with auth

php artisan ui vue --auth

Step 5: Installing NPM

Now you need to install a node. To install a node run the following command.

npm install

Also Read: How to create SEO friendly sluggable URL Laravel 9 Example

Step 6: Testing

Now test the app with the following command.

npm run dev

and start the laravel server by following command.

php artisan serve

now vue js has been installed you can use it!

Preview:

Step 7: Conclusion

Today, We had learn Laravel 9 Install Vue JS Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: Restrict User Access from IP Address in Laravel 9 Tutorial