Created
January 25, 2023 15:54
-
-
Save mohitmamoria/d54cbd759bb50fe0635cd1e234385a25 to your computer and use it in GitHub Desktop.
Laravel + Vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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. | |
| */ | |
| import { createApp, defineAsyncComponent } from "vue"; | |
| import "./bootstrap"; | |
| /** | |
| * Next, we will create a fresh Vue application instance. You may then begin | |
| * registering components with the application instance so they are ready | |
| * to use in your application's views. An example is included for you. | |
| */ | |
| const app = createApp({}); | |
| /** | |
| * 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> | |
| */ | |
| Object.entries(import.meta.glob("./**/*.vue")).forEach(([path, definition]) => { | |
| app.component( | |
| path | |
| .split("/") | |
| .pop() | |
| .replace(/\.\w+$/, ""), | |
| defineAsyncComponent(definition) | |
| ); | |
| }); | |
| /** | |
| * Finally, we will attach the application instance to a HTML element with | |
| * an "id" attribute of "app". This element is included with the "auth" | |
| * scaffolding. Otherwise, you will need to add an element yourself. | |
| */ | |
| app.mount("#app"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "compilerOptions": { | |
| "baseUrl": ".", | |
| "paths": { | |
| "@/*": ["resources/js/*"] | |
| } | |
| }, | |
| "exclude": ["node_modules", "public"] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import vue from "@vitejs/plugin-vue"; | |
| import laravel from "laravel-vite-plugin"; | |
| import { defineConfig } from "vite"; | |
| export default defineConfig({ | |
| plugins: [ | |
| laravel({ | |
| input: ["resources/css/app.css", "resources/js/app.js"], | |
| refresh: true, | |
| }), | |
| vue({ | |
| template: { | |
| transformAssetUrls: { | |
| base: null, | |
| includeAbsolute: false, | |
| }, | |
| }, | |
| }), | |
| ], | |
| resolve: { | |
| alias: { | |
| vue: "vue/dist/vue.esm-bundler.js", | |
| }, | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment