Git Product home page Git Product logo

vue-generators's Introduction

Laravel Vue Generators

StyleCI

This Laravel package provides the following two generators to speed up your Vue development process:

  • make:vue-component
  • make:vue-mixin

Usage

Step 1: Install Through Composer

composer require beckenrode/vue-generator

Step 2: Add the Service Provider

Laravel 5.5

Laravel's Package Discovery automatically discovers this package.

Laravel < 5.5

Open config/app.php, and add a new item to the Package Service Providers array.

Beckenrode\VueGenerators\VueGeneratorsServiceProvider::class,

Step 3: Configuration (Optional)

You may want to adjust your Component/Mixin stubs or change the path in which they are generated. To do this you simply need to publish the configuration file.

Laravel 5.5

php artisan vendor:publish

Laravel < 5.5

php artisan vendor:publish --provider="Beckenrode\VueGenerators\VueGeneratorsServiceProvider"

This will publish the following configuration file to config/vue-generators.php:

<?php

return [

    /*
    * Location of the stubs to use
    */
    //'component_stub' => __DIR__.'/component.stub',
    //'mixin_stub' => __DIR__.'/mixin.stub',

    /*
    * Location of where to generate the files
    */
    'components_path' => '/resources/assets/js/components/',
    'mixins_path'     => '/resources/assets/js/mixins/'

];

Examples

Vue Component

php artisan make:vue-component MyNewComponent

This will generate the following MyNewComponent.vue Vue component in /resources/assets/js/components/:

<template>

</template>

<script>
    export default {
        // Assets
        components: {},

        // Composition
        mixins: [],

        extends: {}

        // Data
        data() {
            return {}
        },

        props: {},

        propsData: {},

        computed: {},

        methods: {},

        watch: {},

        // Lifecycle Hooks
        beforeCreate() {},

        created() {},

        beforeMount() {},

        mounted() {},

        beforeUpdate() {},

        updated() {},

        activated() {},

        deactivated() {},

        beforeDestroy() {},

        destroyed() {}
    }
</script>

<style>

</style>

Vue Mixin

php artisan make:vue-mixin MyNewMixin

This will generate the following MyNewMixin.js Vue mixin in /resources/assets/js/mixins/:

export default {
    // Assets
    components: {},

    // Composition
    mixins: [],

    extends: {}

    // Data
    data() {
        return {}
    },

    props: {},

    propsData: {},

    computed: {},

    methods: {},

    watch: {},

    // Lifecycle Hooks
    beforeCreate() {},

    created() {},

    beforeMount() {},

    mounted() {},

    beforeUpdate() {},

    updated() {},

    activated() {},

    deactivated() {},

    beforeDestroy() {},

    destroyed() {}
}

Testing

Development

Want to contribute? Great!

License

The MIT License (MIT)

Free Software, Hell Yeah!

vue-generators's People

Contributors

beckenrode avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

laminblur

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.