Vue Js 3 with Laravel 9 Project Quick Installation
In this article, I will help you to install VUE JS 3 in Laravel 9 project.
Prerequisites
- PHP (https://www.php.net/downloads)
- Composer (https://getcomposer.org/download/)
- Visual Studio Code (Vs Code)
Step 1 — Create a new Laravel 9 Project
Open command prompt and type following command and hit enter to install new Laravel 9 project to your machine.
composer create-project laravel/laravel sampleProject
This command will create a new Laravel 9 project in your directory. “sampleProject” is the project name and you can give any name for your project. Now open your new Laravel 9 project in Vs Code.
Step 2— Install Vue 3
After installing the Laravel 9 project you have to install Vue js project inside your Laravel project. To install Vue js project, type the following command on your VS Code terminal.
npm install — save vue@next npm install — save-dev vue-loader@next
This command will install latest Vue js project inside your Laravel project with other necessary dependencies. Now there should be the “node_modules” folder in your project and “package.json” file should be updated as follows.
Step 3— Mix Vue Js using Laravel mix
After installing Vue js you have to mix it. For that go to the “webpack.mix.js” file and add “.vue()”.
Step 4 — Create all necessary files to start with Vue js
In this step we will add some files inside the resources folder to start working with Vue js. Firstly, we have to update the “welcome.blade.php” file.
Now we should create a new file called “App.vue” to create the first Vue file inside the project.
Finally, we have to update the “app.js” file to create the Vue app and mount it.
Below image shows how all the files are located inside the “resources” folder in project structure.
Step 5— Compile Js Assets and run the project
After creating all the files, we should compile js assets in our project. To compile those assets run following command and it will build your project again with the js assets.
npm run watch
Finally, run the following command to start your Laravel 9 project with Vue 3.
php artisan serve
