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

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 col-lg-12">
        <div class="card">
          <div class="card-header">Example Component</div>
          <div class="card-body">
            I'm an example component.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
window.Vue = require('vue').default;
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    el: '#app',
});

Kết quả:

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

Last updated 2 years ago

$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

<!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>

<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-12"> <div class="card"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template>

/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue').default; /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /\.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) Vue.component('example-component', require('./components/ExampleComponent.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', });