Vue Structure

Using the Structure Generator CLI

  • Components
  • Views
    • Routes
  • Store Modules
  • Filters
  • Directives
  • Mixins

Installation

# Add Generator in your vue cli project
vue add structure-generator

Getting Started with Structure Generator

# Start using
$ yarn make

? What do you want to generate? #(Use arrow keys)
❯ Component
  View
  Store
  Mixin
  Directive

Shorthand generate commands

Shorthand commands give you the option to skip the prompt, it will also not generate imports in _globals.js files (for component, directive, filters and mixins), for views will it skip the route generator as wel.

Using Shorthand commands

yarn make --<type> [<name>]

Examples:

# Generate component
yarn make --component button

# Generate view
yarn make --view contact

# Generate store
yarn make --store products

# Generate filter
yarn make --filter uppercase

# Generate directive
yarn make --directive focus

# Generate mixin
yarn make --mixin scrollTo

WARNING

When using the shorthand command it will generate by using the default settings. By generating a view it skips the route generation.

←