Component template for Vue

This tip #7 brings you a component builder using vue-cli and webpack

Suppose you need to create a "remaining characters" counter for a textarea, just like the one from twitter. And publish to npm as vue-remaining-chars.

Let's do it

First you need the official vue command-line interface installed globally in you system.

npm i -g vue-cli
# or
yarn global add vue-cli

Them we need to create a new project based on the template.

vue init vuejs-tips/vue-component-template vue-remaining-chars
# answer all questions (ENTER)
cd vue-remaining-chars
npm run dev
# Open http://localhost:4000/ and enjoy your new component!

Edit your component in src/Component.vue and test in demo/demo.vue.

When you be ready to deploy, make the necessary adjusts in demo/index.html and test with:

npm run dist # generate final component at ./dist/
npm run dist:demo # generate demo app at ./demo/
npm i -g serve # install serve globally to test static pages
npm run demo:open # Open demo at http://localhost:3000/

Now you can increment the version and publish to npm (free account required)

npm version patch # increments version from 0.0.1 to 0.0.2
npm publish
In the next tips, we are going to publish our tag component to npm using this template.
Like what you read? Give Marcos Neves a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.