
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 emptyapp.css
filejs
folder and there would be a code withapp.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.