PHPackages axitbv/laravel-artisan-vue - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. axitbv/laravel-artisan-vue ActiveLibrary axitbv/laravel-artisan-vue ========================== Laravel Artisan Command for scaffolding a Vue.js feature application with a Vuex store 1.3(5y ago)1116MITPHPPHP ^7.1.3|^8.0 Since Sep 12Pushed 5y ago1 watchersCompare [ Source](https://github.com/axitbv/laravel-artisan-vue)[ Packagist](https://packagist.org/packages/axitbv/laravel-artisan-vue)[ RSS](/packages/axitbv-laravel-artisan-vue/feed)WikiDiscussions master Synced yesterday READMEChangelog (4)Dependencies (3)Versions (5)Used By (0) laravel-artisan-vue =================== [](#laravel-artisan-vue) Laravel Artisan Command for scaffolding a `Vue.js` feature application with a `Vuex` store, utilizing some best practices. Installing ---------- [](#installing) `composer require --dev axitbv/laravel-artisan-vue` Using the command ----------------- [](#using-the-command) `php artisan vue:feature SomeNewFeature` Will yield: ``` resources/js/components/some-new-feature/components/App.vue resources/js/components/some-new-feature/index.js resources/js/components/some-new-feature/store/actions.js resources/js/components/some-new-feature/store/getters.js resources/js/components/some-new-feature/store/index.js resources/js/components/some-new-feature/store/mutation_types.js resources/js/components/some-new-feature/store/mutations.js resources/js/components/some-new-feature/store/state.js ``` Using the generated files ------------------------- [](#using-the-generated-files) > The idea here is to Code Split each Vue.js Feature App into its own bundle. This bundle is then loaded into the view that will service the feature. One view, one page specific bundle, one store, one service, one entrypoint, one container component. 1. Make sure that the entrypoint `resources/js/components/some-new-feature/index.js` is built to its own bundle. Example `webpack.mix.js` configuration: ``` const mix = require("laravel-mix"); mix.js("resources/js/app.js", "public/js") .js("resources/js/components/some-new-feature/index.js", "public/js/some-new-feature.js") .sass("resources/sass/app.scss", "public/css/all.css"); mix.extract(); if (mix.config.production) { mix.version(); } ``` 2. One your view, make sure that you load that js, after the main scripts (`manifest.js`, `vendor.js` and `app.js`). ``` @section('after_scripts') @endsection ``` If you don't have a section like that yet, modify your `layout/app.blade.php`. Just make sure that the app feature bundle is loaded after the other scripts. 3. Add a div with the appropriate `id`, in which the feature app will boot. ``` ``` 4. **Optional**: If you pass any data from the controller to the feature app, you can add one or more `data-*` attributes on the `` tag. You can pass *any* type of data to one or more `data`-attributes, but one of the most common examples is to pass some sort of endpoint for the app to communicate with. For example, in a Blog Editor feature app, one could pass a full path to a post like so: ``` ``` And have an action call the api and retrieve the data. Another way would be to simply get the post data from the Controller and pass it as a prop: ``` ``` Or yet another way: ``` ``` It's up to you. Laravel Default Vue.js Setup Caveats ------------------------------------ [](#laravel-default-vuejs-setup-caveats) The way that Laravel ships Vue.js (with a frontend preset) assumes that would want the following to be true: 1. You want to load Vue-components anywhere on the page 2. You want to have any and all Vue-components you have, loaded into memory and ready to go, with each and every page request. 3. If your Vue-components have Vuex-stores, it will be merged into one global single state tree. This means that, if you follow the load-everything-all-the-time-all-at-once method, that your Root instance will have a combined state of everything, even when a feature is not necessarily shown or used on a page. This is achieved by having an encapsulating `` in the `layouts/app.blade.php` file that is scaffolded by the frontend preset. Additionally, the `app.js` will boot a Vue.js Root instance inside of that encapsulating ``. The provided `ExampleComponent` is also loaded into memory, and there is a code snippet that can recursively load *all* Vue files. > ## **If you are building large applications, with large features, that have numerous subcomponents and Vuex stores, this will become unsustainable very quickly!** > > [](#if-you-are-building-large-applications-with-large-features-that-have-numerous-subcomponents-and-vuex-stores-this-will-become-unsustainable-very-quickly) **What you want to achieve is the following:** - For any Vue-components that need to be globally available on each and every page view, register it in the `app.js`. Stuff like Navigational components, such as navbars, menu's, etc. - Instead of having One Big Vue Instance: Create multiple Vue-instances (Roots) for the various sections of your layout (Navbar section, sidebar, control sidebar, footer, etc.) all with uniquely identifying `id`'s, preferably properly namespaced, like `#navbar-js-vue`, `#sidebar-js-vue`. - Create one page specific bundle for each feature view of your app, that will have its own entrypoint, its own container, its own Vue.js Root instance. **This is what this package will provide!** The result is that you will be loading only the stuff that is required for the feature that is served by your application's view into memory. The additional benefit is that when you have multiple Vuex-enabled stores, you will not get a global single state tree: the state is confined to the Root of your feature app. Lastly, the Vue.js devtools plays very nice with multiple roots as well. Credits ------- [](#credits) This was heavily inspired by GitLab's Front End Development Guidelines: - [https://docs.gitlab.com/ee/development/fe\_guide/vue.html](https://docs.gitlab.com/ee/development/fe_guide/vue.html) - [https://docs.gitlab.com/ee/development/fe\_guide/vuex.html](https://docs.gitlab.com/ee/development/fe_guide/vuex.html) License ------- [](#license) MIT ### Health Score 29 — LowBetter than 60% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community7 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~160 days Total 4 Last Release 1953d ago PHP version history (2 changes)v1.0PHP ^7.1.3 1.3PHP ^7.1.3|^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/24fab1c08fcb23880af3d86982ce81939672210502fb5441d4fdeaa1c4dba29f?d=identicon)[axit.joost](/maintainers/axit.joost) --- Top Contributors [![axit-joost](https://avatars.githubusercontent.com/u/13835397?v=4)](https://github.com/axit-joost "axit-joost (8 commits)") --- Tags artisan-commandlaravelscaffoldingvuejsvuexlaravelscaffoldartisanvueVue.jsvuex ### Embed Badge ![Health badge](/badges/axitbv-laravel-artisan-vue/health.svg) ``` [![Health](https://phpackages.com/badges/axitbv-laravel-artisan-vue/health.svg)](https://phpackages.com/packages/axitbv-laravel-artisan-vue) ``` ### Alternatives [barryvdh/laravel-ide-helper Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion. 14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[laravel/ui Laravel UI utilities and presets. 2.7k134.9M601](/packages/laravel-ui)[tucker-eric/eloquentfilter An Eloquent way to filter Eloquent Models 1.8k4.8M26](/packages/tucker-eric-eloquentfilter)[erag/laravel-disposable-email A Laravel package to detect and block disposable email addresses. 226102.4k](/packages/erag-laravel-disposable-email)[cybercog/laravel-clickhouse ClickHouse migrations for Laravel 163166.8k](/packages/cybercog-laravel-clickhouse)[toponepercent/baum Baum is an implementation of the Nested Set pattern for Eloquent models. 3154.7k](/packages/toponepercent-baum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)