Registration Log in using laravel + vuejs (Part 1)

Tram Ho

Introduce

Hello everyone, today I am interested in making a single blog about vuejs, I will make a series of logins and some simple management functions. During a few months of using vuejs, you want to store + share basic knowledge for those who are learning about Vue. Lets Go !!!!


first . Install laravel

First we need to install laravel already:

composer create-project –prefer-dist laravel / laravel blog

Then access the run directory: composer install php artisan key: generate php artisan serve

A blog site, we need a Post table to save articles and Categories to manage article categories:

Here I create 3 tables: User + Post + Category

php artisan make: migraiton create_post_table

php artisan make: migration create_users_table

php artisan make: migration create_category_table

From laravel 6.x and later, vue is separated into a separate package to use, you need to download this package:

composer require laravel / ui

After downloading, run again:

php artisan ui bootstrap

artisan ui vue

We will navigate the default laravel into a single view file in web.php as follows:

And you open up resource / js which already has 1 folder named components. simple right?

2. Install Vue

npm install vue-router vue-axios –save

Now that you’ve installed the router and axios router, now go to resources> views and create home.blade.php as follows:

Then we run the command:

npm run dev or npm run watch

Next we will create 3 components in components:

App.vue (main component)

Post.vue (component page post)

User.vue (component page user)

App content:

User page content:

Next we create a routes file in resources / js

path: is the path displayed in the address bar,

component: is the component that will be rendered into the layout

name: used to identify the route, so we can use it more conveniently.

Next in the file js / app.js will modify the following to import vue-router and declare use:

final result :

3. Finish

This article I would like to end here if you have any questions, please comment below. like and subscribe so I can motivate you to write more posts about this series. Thanks everyone .

Share the news now

Source : Viblo