Authentication cho Vuejs + Laravel với Laravel Passport (Phần 2): Cài đặt và chạy thử Vuejs

Giới thiệu

Xin chào các bạn, chào mừng các bạn đã quay trở lại với Series: Tạo chức năng đăng nhập đăng ký cho Vuejs và Laravel. Ở phần trước chúng ta đã cài đặt và cấu hình cơ bản cho phía back-end sử dụng package Passport rồi (xem phần 1: Authentication cho Vuejs + Laravel với Laravel Passport (Phần 1): Cấu hình back-end).

Hôm nay để nối tiếp phần 1, chúng ta sẽ làm tiếp tục bắt tay vào làm phía Vuejs các bạn nhé.

Làm việc tiếp nào

Ở trong series này thì mình sẽ sử dụng Vuejs ngay trên project Laravel các bạn nhé. Tất nhiên là nếu như các bạn tách riêng thì về cơ bản cũng sẽ giống hệt nhau (cần phải xử lý HTTP access control (CORS) phía back-end để có thể thao tác dữ liệu từ API.

Cài đặt webpack và các dependencies

Trong project Laravel của mình, các bạn hãy chạy command sau để cài install các dependencies và đặc biệt là Webpack để phục vụ cho việc compile Vuejs ra Javascript thông thường:

npm install

Thêm 1 điều nữa là để có thể chạy lệnh này thì máy tính của bạn phải có sẵn Nodejs và NPM nhé. Nếu chưa có thì các bạn có thể tìm hiểu và cài đặt NODEJS tại đây.

Chạy lệnh install

Chạy thử Vuejs trên Laravel

Sau khi chạy xong lệnh ở trên các bạn chạy tiếp lệnh này. Nó sẽ compile VueJS sang Javascript để trình duyệt có thể đọc và chạy.

npm run dev
Compile Vuejs

Xóa file resource/views/welcome.blade.php đồng thời tạo file resource/views/app.blade.php với nội dung sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Authentication Vuejs and Laravel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>

    <div id="app" style="height: 100%">
        <example-component></example-component>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>

</body>
</html>

Sửa file routes/web.php thành như sau:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('app');
});

Khởi động server Laravel bằng cách chạy:

php artisan serve

Sau đó truy cập vào đường dẫn sau: http://127.0.0.1:8000 và tận hưởng thành quả:

Chương trình thử nghiệm thành công

Kết luận

Cảm ơn các bạn đã theo dõi bài viết này. Trong phần sau mình sẽ hướng dẫn các bạn việc tạo form đăng nhập, đăng ký và validate form trên Vuejs.

Các bạn có thể download Source Code tại đây: https://github.com/nguyentien98/auth-vuejs-laravel/tree/phan_2

Nguồn: Vantien.net