Frontend Scaffolding Part 1 - Laravel with Vue JS - Write First Vue Component
Categories - Vue JS Laravel PHP Framework JavaScript Tags - JavaScript Laravel   Maniruzzaman Akash   2 years ago   2368   3 minutes   0

Frontend Scaffolding Part 1 - Laravel with Vue JS - Write First Vue Component

Hello Everyone, 

Welcome to Laravel Advanced tutorial series again.


Today, I'll be going to show you how to setup very easily Vue/React JS with Laravel.

Steps & What we'll do today:

  1. Install Node JS
  2. Check node or npm version if properly installed or not by this command -  node -v
  3. Install npm on Laravel project
  4. Integrate front-end script to our project.
  5. Install vue - npm i vue
  6. Setup vue js
  7. Make first vue Counter component.


Possible Node JS issue:

Windows: Node path needs to add manually on the windows environment variable. 


Let's do one by one - 

Install Node JS:

Go to Node JS documentation and download the latest version of Node JS. When we're doing this. Versions information are - 

Node JS version is - 14.6

After successfully installed node js. Check if those are installed properly.

#Check Node Version
node -v // 14.6

#Check NPM Version
npm -v // 7.18.1


Install Npm on Laravel Project

On your laravel project, run the command to install all node dependency and a fresh frontend setup - 

 npm install

This will create a node_modules folder in the project root.


Check if everything works with Frontend scaffolding in Laravel. 

Add some console.log() in resources/js/app.js.


console.log('Welcome to frontend.');


And to compile assets run the following command - 

npm run dev


And to detect compile assets all the time run the following command - 

npm run watch

And, you'll see a nice mix() success alert of success of your compilation. 

Look at the public folder. There will be - 

  1. css folder and there would be an empty app.css file
  2. js folder and there would be a code with app.js file.


Add JS in your project view file:

Add this app.js script in your project view file to check if the console appear or not - 


in resources/views/welcome.php and at the very bottom of the file - 

<script src="{{ asset('js/app.js') }}"></script>


And run it on browser and open console terminal and you'll see a console message of Welcome to frontend.

That's great and frontend is done it's setup.


Install vue and write the first vue component:

Install vue js - 

npm i vue


Add it in webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()


Now in app.js install vue setup code - 

import Vue from 'vue';

const app = new Vue({
    el: '#app'


Now add the very first Counter component inside components/Counter.vue -

	<div class="button-area">
		<button @click="counter--" class="dec-button">-</button>
		{{ counter }}
		<button @click="counter++" class="inc-button">+</button>

export default {
	name: "Counter",
	data() {
		return {
			counter: 0,


Register the component in app.js -

Vue.component('counter', require('./components/Counter.vue').default)


Import the component in frontend view file - 



And full view file could be resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <div id="app">
            <div class="card card-body p-5 ml-5 mr-5">
                <h2>Welcome to Laravel Frontend</h2>
        <script src="{{ asset('js/app.js') }}"></script>


That's it, you have set upped a very simple Counter app with your Laravel application.


Please stay tuned with DevsEnv to get more exciting tutorial about Laravel, Vue and React JS.