1. composer create-project --prefer-dist laravel/laravel ??? "8.*"

2. átnavigálni a projekt mappájába!

3. composer require laravel/ui

4. p'artisan ui bootstrap

5. p'artisan ui vue

Vue2 felülírása Vue3-ra:

- npm install --save vue@next vue-router@next (@next nélkül Vue2 lenne -még.)

- npm install --save-dev vue-loader@next

- npm install @vue/compiler-sfc --save-dev --legacy-peer-deps

- npm install --save mitt

6. npm install + npm run dev

npm run watch "child" warning elvágása:

- npm install autoprefixer@10.4.5 --save-exact

SPA alapozása

app.js

import { createApp, h } form 'vue';

import router from 'routing.js';

import axios from 'axios';

import mitt from 'mitt';

import BaseComp from './BaseComp.vue';

const emitter = mitt();

const app = createApp({ render() { return h(BaseComp); } })

app.config.globalProperties.$axios = axios;

app.config.globalProperties.$emitter = emitter;

app.use(router);

app.mount("#html-element");

Vue3-ban createApp-on belül a Vue2-höz hasonlóan mehetnek egyedi cuccok: data(), mounted(), stb, de a render() eltérő! A "h"-t külön importálni kell! Valamint Vue3-ban app metódjaival köll használni a "use", "mount", stb.

routing.js

import { createWebHistory, createRouter } from 'vue-router'

import EgyediComp from './EgyediComp.vue'

export const routes = [{}, {}, {}]

const router = createRouter({ history: createWebHistory(), routes: routes });

export default router

7. Nem elfelejteni az alap blade/index file-ban:

<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" />

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