Vueon - Vue z Vite w Laravel

Instalcja Vue z Vite w Laravelu w wybranym katalogu (vue-project).

Author: atomjoy

README.md

@@ -1,2 +1,66 @@
-# vueon
-Instalcja Vue z Vite w Laravelu w wybranym katalogu (vue-project).
+# Vueon
+
+Laravelu instalcja Vue z Vite w wybranym katalogu (vue-project).
+
+### Project Laravela
+
+```sh
+composer create-project laravel/laravel:^9.0 demo
+```
+
+### Dodaj pakiet atomjoy/vueon
+
+```sh
+cd demo
+composer require atomjoy/vueon 1.0.*
+composer update
+composer dump-autoload -o
+```
+
+### Utwórz projekt Vue w Laravel
+
+```sh
+npm init vue@latest
+cd vue-project
+npm install
+cd ..
+```
+
+### Konfiguracja Vite
+
+```sh
+# Laravel root dir
+php artisan vendor:publish --tag=vueon-config --force
+```
+
+### Dodaj routes
+
+```php
+<?php
+// Laravel routes
+Route::get('/welcome', function () {
+    return view('welcome');
+});
+
+// Laravel login auth redirect url
+Route::get('/login', function () {
+    return view('vueon::vue');
+})->name('login');
+
+// Vue all routes
+Route::fallback(function () {
+    return view('vueon::vue');
+});
+```
+
+### Uruchom aplikację
+
+demo/vue-project
+
+```sh
+cd vue-project
+# Vue build
+npm run build
+# Php Laravel server
+php ../artisan serve
+```

composer.json

@@ -0,0 +1,28 @@
+{
+	"name": "atomjoy/vueon",
+	"description": "Vue custom directory in Laravel",
+	"type": "library",
+	"license": "MIT",
+	"authors": [
+		{
+			"name": "Atomjoy",
+			"email": "atomjoy.official@gmail.com"
+		}
+	],
+	"minimum-stability": "dev",
+	"require": {
+		"openpayu/openpayu": "2.3.*"
+	},
+	"autoload": {
+		"classmap": [
+			"src/"
+		]
+	},
+	"extra": {
+		"laravel": {
+			"providers": [
+				"Vueon\\VueonServiceProvider"
+			]
+		}
+	}
+}

resources/views/vue.blade.php

@@ -0,0 +1 @@
+@vueon()

src/VueonServiceProvider.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Vueon;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Blade;
+
+class VueonServiceProvider extends ServiceProvider
+{
+	/**
+	 * Register services.
+	 *
+	 * @return void
+	 */
+	public function register()
+	{
+	}
+
+	/**
+	 * Bootstrap services.
+	 *
+	 * @return void
+	 */
+	public function boot()
+	{
+		$this->loadViewsFrom(__DIR__ . '/../resources/views', 'vueon');
+
+		if ($this->app->runningInConsole()) {
+			$this->publishes([
+				__DIR__ . '/../vite' => base_path('vue-project')
+			], 'vueon-config');
+
+			$this->publishes([
+				__DIR__ . '/../resources/views' => resource_path('views/vendor/vueon'),
+			], 'vueon-views');
+		}
+
+		Blade::directive('vueon', function () {
+			return file_get_contents(base_path() . '/public/index.html');
+		});
+	}
+}

vite/vite.config.js

@@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url)),
+		},
+	},
+	build: {
+		outDir: '../public',
+		rollupOptions: {
+			output: {
+				assetFileNames: 'vue/[ext]/[name][extname]',
+				chunkFileNames: 'vue/chunks/[name].[hash].js',
+				entryFileNames: 'vue/js/[name].[hash].js',
+			},
+		},
+	},
+})