Frontend Scaffolding Part 1 - Laravel with Vue JS - Write First Vue Component
Categories - Vue JS Laravel PHP Framework JavaScript Tags - JavaScript Laravel   Maniruzzaman Akash   1 year ago   1531   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 https://nodejs.org/en/download/ 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.

require('./bootstrap');

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';
require('./bootstrap');

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

 

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

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

<script>
export default {
	name: "Counter",
	data() {
		return {
			counter: 0,
		};
	},
};
</script>

 

Register the component in app.js -

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

 

Import the component in frontend view file - 

<counter></counter>

 

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

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

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

 

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.