Рубрики
Laravel

Настройки в шаблоне Laravel проекта

  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
import MyTest from './components/MyTest.vue';

const app=createApp({});
app.component('my-test',MyTest);

app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в атрибуте id тега (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app">
    <my-test/>
    </div>

    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...
Рубрики
Vue.js

Настройка работы компонентов Vue3 в Laravel проекте

  • Установка Vue3 в Laravel проекте через терминале IDE
установка менеджера пакетов в проекте
npm install
установка последней версии laravel-mix
npm i laravel-mix
установка пакета vue через npm
npm install --save vue@next
npm install --save-dev vue-loader@next
запуск приложения Vue локально (не использую)
npm run serve
  • Настройка работы Vue3 в проекте Laravel
    в файл webpack.mix.js (находится в корне проекта)
    добавить метод vue
...
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
  • папка, где хранятся компоненты vue resources\js\components
  • файл регистрирует компоненты Vue в Laravel
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';

const app=createApp({});

app.mount('#app');
Рубрики
Vue.js

Первый Vue3 компонент в Laravel проекте

  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from 'components/../App.vue';
//компоненты
import comp1 from 'components/comp1.vue';
import comp2 from 'components/comp2.vue';
//создание главного компонента
//и регистрация внутри него других компонентов
const app=createApp(App);
app.component('comp-1',comp1);
app.component('comp-2',comp2);
app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в id=»app» (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app"></div>
    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...