Laravel8 Vue JS Tutorial #1 Installation and Setup

In this tutorial, we discuss the laravel8 tutorial with vue js, which includes the stages of installation and preparation, therefore this laravel8 tutorial with vue js is specially made and easy to understand for those of you who are just learning.

Read more : Learn laravel 8 basics for beginners # part1 Installing Laravel 8

At the time laravel version 6 came with a lot of new features added, the website made with laravel was completely overhauled and displayed a new logo. Another difference will be felt when we generate authentication components in Laravel or Scafolding using the make auth command.

In laravel 6 and above, the team from laravel removed the php artisan make:auth command, so if you want to run the authentication system automatically on laravel 6 and above, you must first install a package called laravel ui, the package is a package developed directly by laravel laravel and breaks the interface part of laravel into a separate package, with the following allowing you to switch and use other libraries.

Because previously, Laravel version 5.8, by default the Laravel application already had the required UI, namely using bootstrap and using vue.js even though not everyone would use the UI, so the team from Larvel took the initiative to change it, where in Laravel 6 and above the UI was separate and serve as a module called laravel UI.

Vue Introduction

This laravel8 tutorial with vue js of course we must know What is VueJS? Vue js is a reformist and open source JavaScript system for building site interfaces/UIs created by Evan You. This structure was first submitted in February 2014 and the stable form was delivered in December 2019.

Vue JS is supported by a total Javascript library and is very easy to run. All things being equal, Vue JS however can be combined with HTML and CSS dialects that don't change much. That way, you won't have any trouble learning it.

Vue (articulation/vjuː/, like display) is a reformist structure for building UI. Unlike other solid structures, Vue is planned from the very beginning to be embraced slowly. The central library is centered around the view layer only, and is not difficult to find and combine with different libraries or existing businesses. In addition, Vue is also fully equipped to create enhanced SPA applications when joined to supporting libraries, such as Vue Router and others.

Evan You first worked on Vue JS in 2013, at which time he worked as a Creative Technologist at Google Creative Labs. After two years at Google, he moved to Meteor, where he assembled the open source JavaScript structure of Meteor Js. After that he focused on making Vue JS until now

Okay, then we will install the laravel framework and apply vue, js into the laravel project that we created, please refer to the discussion below:

Laravel Framework Installation

In the installation section of this laravel framework we will install using composer, make sure friends have installed composer on the PC you are using and make sure it is also connected to the connection. First of all, please create a new folder with the name LearningVue in that folder we will use for the installation directory of the laravel project that we installed. After that, open a command prompt and enter the folder directory, then run the following command:

composer create-project laravel/laravel BelajarVue

In the above command, we will install a laravel project with the name LearningVue, for its own implementation, please pay attention to the image below:

In the picture above we can see the installation directory of the Laravel project, please wait until the installation process is complete. If so, it will look like the following image:

If the laravel framework installation process is complete, we will enter the Laravel and Vue SETUP stage. Please friends see the discussion below.

Laravel and Vue Settings

To setup Laravel and Vue, we can use 2 ways: we create our own setup and we can automatically setup it when we run the command

composer require laravel/ui

and wait until the laravel UI installation process is complete, then if the installation is successful we will see something like the image below.

To check whether the laravel/ui installation was successful or not, we can open the composer.json file and look for it in the require section, it will look like the following image:

If it's successful, it means you can do or create scaffolding templates, there are some that we can use, of course, to make scaffolding, friends, you can see in the command below:

// Generate basic scaffolding...

php artisan ui bootstrap

php artisan ui vue

php artisan ui react

// Generate login / registration scaffolding

php artisan ui bootstrap --auth

php artisan ui vue --auth

php artisan ui react --auth

Just for knowledge, Laravel uses Laravel MIX which can provide a good API and can be used for compailing. In Laravel MIX we can also use it for integration with Vue.

Because in this tutorial we will focus on creating a simple application using SPA Vue only without authentication, we will run commands like the following:

php artisan ui vue

 

If successful then there are the addition of several new components in the resources/js directory and the packages.json file will appear as shown below.

 The packages.json file is a file that is used for javascript needs, namely on the backend or frontend, where the UI settings provide the initial settings for the development process.

Introducing Node JS in Laravel

Currently you can introduce Node JS in Laravel by using the npm introduce command. As we talked about earlier, if you have introduced Node Js, usually include npm. Therefore we can use the npm recognition command.

Before compiling css and javascript, of course, you have to install dependencies to do note packages manager (NPM). To do this we will type the following command to download all the packages:

npm install

The installation process is as follows:

The installation has been successful, all dependencies have been installed into the Laravel project, so if we look at the project there is a new folder added with the name node_modules, if we have successfully installed the dependencies, we will run the command:

npm run dev

The development stage or the building stage will be carried out by Laravel-MIX, all settings from Laravel MIX are in the resource folder for CSS and JS.

Please wait for the process to run the npm run dev command, we, you guys managed to run it, it will look like the following picture:

If it is successful then we are ready to create applications from the laravel framework with vue js. For this first stage, maybe that's all I can say, I hope you can understand what I have explained above.

Thank you for visiting and reading this article about Laravel Vue JS Tutorial #1 Installation and Preparation, I hope it's useful. 

Greetings Success, By: Muhammad Rizal Supriadi