Basic Laravel 7 Vue Js Setup
Team Urgence
We will discuss the “Basic Laravel 7 Vue Js Setup”.
Requirements:
- Download and Install Composer. Composer
- Download and Install Xampp. Xampp
- Download and Install Node Js. Node
- Download and Install VSCode (for code editing). VSCode
How?
Create Laravel Project
First we need to create Project. Go to your desired folder where you want to create the project and run "cmd" in folder path.
This will open a command prompt window that we will be using in creating a Laravel Project, and run:
composer create-project --prefer-dist laravel/laravel:^7.0 blog
This command will install new Laravel Project. You can change the name of the Project folder by changing "blog" in the command. After installation, we will open the created Project in VSCode.
Add Frontend Package
The above screen will open new terminal in VSCode, and we will install package with this commands:
composer require laravel/ui:^2.4
php artisan ui vue --auth
The first command will install laravel/ui package for us to run the second command which is to generate frontend scaffolding with login and registration already, following from the official docs.
https://laravel.com/docs/7.x/frontend
Setup
Once installed, we change the codes inside the file as shown above with this:
<!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 Vue Js</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>In above code, these codes will connect and let us use components from vue file:
<script src="{{ asset('js/app.js') }}" defer></script>​<div id="app">
<example-component></example-component>
</div>​After this, we need to run these commands in terminal:
npm install
npm run dev
This will install any packages that it depends on and to compile your scaffolding. Finally, we run php artisan serve. This will start the development server with default options.
Above screen will display after we run php artisan serve. We can check the link on the browser and you will now see this page from vue:
That's it. Hope you increase your knowledge after reading this.
