Kết hợp Laravel vs Vuejs (ok)

https://laravel.com/docs/7.x/frontend

Cài đặt

$composer require laravel/ui:^2.4 nếu lỗi thì sử dụng composer require laravel/ui
$php artisan ui bootstrap
$php artisan ui vue
$php artisan ui bootstrap --auth
$php artisan ui vue --auth
$yarn dev nếu lỗi sử dụng tiếp
$npm install laravel-mix@latest --save-dev
$npm run dev nếu vẫn lỗi chạy tiếp npm update vue-loader
$npm run dev

C:\xampp\htdocs\vl\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">
    <link rel="stylesheet" type="text/css" href="{{ url("public/css/app.css") }}">
    <title>Laravel</title>
</head>
<body class="antialiased">
    <div class="container relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        @if (Route::has('login'))
        <div class="px-3 hidden fixed top-0 right-0 px-6 py-4 sm:block">
            @auth
            <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
            @else
            <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
            @if (Route::has('register'))
            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
            @endif
            @endauth
        </div>
        @endif
        <div id="app">
            <example-component />
        </div>
    </div>
    <script type="text/javascript" src="{{ url("public/js/app.js") }}"></script>
</body>
</html>

C:\xampp\htdocs\vl\resources\js\components\ExampleComponent.vue

C:\xampp\htdocs\vl\resources\js\app.js

Kết quả:

PreviousHello Vuejs (ok)NextFetch dữ liệu ra component (ok)

Last updated