Categories - Vue JS Laravel PHP Framework JavaScript Tags - JavaScript Laravel Maniruzzaman Akash 5 months ago 485 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:

Install Node JS
Check node or npm version if properly installed or not by this command - node -v
Install npm on Laravel project
Integrate front-end script to our project.
Install vue - npm i vue
Setup vue js
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 -

css folder and there would be an empty app.css file
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>

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.