david-desmaisons / vue-cli-plugin-component

🛠️ vue-cli 3 plugin to create component

vue-cli-plugin-component

component plugin for vue-cli

project
│   README.md
│   LICENSE (optional)
└───src
│   ├── index.js
│   └───components
│       └───Mycomponent.vue
│
└───example
    ├── App.vue
    ├── main.js

Features

• Adjust build script to only build the component. Use serve script to serve a demo page.

• Create a prepublishOnly script to run the build(s) before publishing the component

• Update README.md with component information

• Optional

  • Use ComponentFixture to develop and test the component

  • Automatically document the component with vue-styleguidist and vuedoc.md .

  • Create a license file for the project

  • Add projects badges

Scripts

Use build to build the component

npm run build

Use serve to serve the application example in the example folder

npm run serve

When using vue.doc

Use doc:build to update the API section of README.md with generated documentation

npm run doc:build

When using vueStyleguide

Use styleguide to run style guide dev server

npm run styleguide

Use styleguide:build to generate a static HTML style guide

npm run styleguide:build

Configuration

• componentName: the name of the component.

• useVueStyleguidist: true to install vue-styleguidist, default: true

• useVueDoc: true to install vuedoc.md, default: true

• addLicense true to add a License file to the project, default: false

• licenseName type of the license file to create, default: MIT

• copyrightHolders Project copy holders, used when creating the license file.

Injected Commands

No command will be injected.

Installing in an Already Created Project

vue add component

Injected webpack-chain Rules

No Changes are performed

vue-cli-plugin-component's Issues

Typescript declaration files are not generated

When vue-cli-plugin-typescript is present, the build step should not only generate javascript bundles, but also typescript declaration files.
I guess this is also related to vuejs/vue-cli#1081. The discussion there mentions some workarounds. I think this plugin would be a great place to include those workarounds.

Errors when plugin is used in a preset

When creating a vue project with the following preset:

{
  "plugins": {
    "vue-cli-plugin-component": {
      "prompts": true
    }
  }
}

and answering no to all the questions, there is no new content added to the readme file. Also the asset directory is not deleted.

Please support dash (-) for component name

Most of the time Vue components start with v- or anything like this.

Your plugin system has some problems with the dash (-).

As you can see I wrote v-hello as a component name.
The following picture shows a problem in compilation

I am not sure exists any better way or not but you can use a dash (-) free name for import components.

However, writing a name : value object for all components in not cool!

components: {
    'v-hello': vhello
  }

[Question] How to publish a plugin?

Hello, This issue is just a question.
I wrote a plugin on voca.js. you can find it here.It is based on your great plugin system.
I use two commands yarn build and npm pack to create a npm package but It does not work on this way however in works perfectly in example section. Can you help me to figre out the problem? Should I do more to resolve this to publish correct npm package?

Line endings in index.js

I think it is common practice to use unix line-endings.
The generated index.js file has dos line endings though.

Add component plugin on top of Vuetify plugin

Hi

I am not sure, It is a problem of your plugin system. I need your help to figure out a solution.
I created a very simple Vue CLI project and I installed Vuetify on top of it. vue add vuetify.
After that I ran the vue add component command on it.

Everything compile successfully but the application does not work perfectly. Without the plugin system Vuetify and all of the controls works perfectly.

You can find the repository here.

I need Vuetify to write some components based on it.

Any idea?

This dependency was not found when using typescript

I created a very very simple component like the following:

The component compiled successfully.

Based on your Read Me you said:

Use serve to serve the application example in the example folder
npm run serve

I ran the command in example folder but I got an error

However, The following tip does not work for me. I ran it in the main directory and example folder.

To install it, you can run: npm install --save ...\vue-component\example\main.js

I prefer to use Typescript so I hope this is not about that! You can find the sample in here

What should I do? please guide me to use your awesome plugin.

Question about creating a new package

The documentation cites what to do when installing in an existing project, but I am not seeing anything regarding starting from scratch. Perhaps I am just seeing it? Is the expectation that we initialize our project using vue create and then afterward us vue add component? Or is there a way to use this to initialize the project right out of the gate?

Consider to support Vuedoc Markdown 3.0.0

Just to notice you that the Vuedoc Markdown 3.0.0 has been release on NPM which bring important features and changes.
It would be great to consider to upgrade vue-cli-plugin-component dependencies.

Also, since 2.x, Vuedoc Markdown requires to install Vuedoc Parser as a peer dependencies.

NPM: https://www.npmjs.com/package/@vuedoc/md/v/3.0.0-beta2