vue-component-creator
An Brainstorm Plugin to create single file vue.js components with a Sass file along them and complete vuex modules. This plugins does a couple of things in order to simplify your dev experience.
Install
Search for Vue Component Creator in the plugins settings. Or download the plugin from the release site
Vue single file component
Right click in the project tree view where you want to place the new module. Then New File -> Vue Module.
This will open a dialog to define the module's name. This name is used later
to name the directory, vue- and sass-file as well as the sass root name, and a root node in the vue file
with the given name.
Structure
- componentName
- _component-name.scss
- component-name.md
- component-name.vue
- component-name.stories.js
- component-name.spec.js
Vuex module
By creating a new Vuex module, a couple of files will be generated.
Structure
- moduleName
- actions.js
- index.js
- mutations.js
- state.js
- mutation-types.js (depending whether you set the
Mutationstypes File - getters.js (depending wether you checked
Getters File - types.d.ts
Customize Templates
Component
Available template variables
| Variable | Example | Description |
|---|---|---|
| componentName | my-module |
Name of the component |
| componentNameCamelCase | myModule |
Name of the component in camelCase |
| componentNamePascalCase | MyModule |
Name of the component in camelCase |
| createMarkdown | 0/1 |
Whether the markdown file is created or not |
Vuex
Available template variables
| Variable | Example | Description |
|---|---|---|
| componentName | my-module |
Name of the component |
| componentNameCamelCase | myModule |
Name of the component in camelCase |
| componentNamePascalCase | MyModule |
Name of the component in camelCase |
| mutationsFile | ./mutation-types.js |
Filepath to the mutations |
| property | data |
Name of the property to be created |
| getterName | getData |
Getter function name |
| propertyType | string |
Type of the property |
| getters | 0/1 |
Create getters |
| useInterface | 0/1 |
Create a typescript file with type definitions |
| createMutationTypes | 0/1 |
Whether to create a custom mutation types file |
| actionName | setData |
Name of the action |
| mutationName | SET_DATA |
Name of the mutation type |
| tsInterfaceName | MyModuleState |
Name of the TypeScript State interface name |
Development
Checkout the Development Setup Guide for the setup.
Icons
Icons provided by https://www.iconfinder.com/justicon via https://www.iconfinder.com