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.