Test out Your Vue Component Ideas in No Time with Instant Prototyping

Before the advent of Vue CLI 3, if I needed to test out a vue component idea, or answer someone's question about Vue, I create a prototype project in one of these three ways:

• I create an index.html, pull in Vue.js library, and use <script type="text/x-template" id="test"> to write the component's template in html.
• Or, I use an online code editor like CodePen or JSFiddle.
• Or, I create a new full webpack project with vue cli.

All these ways work and are good, but they are either overkill or not so flexible.

I always wanted a quick way to create a single *.vue file and then just run it in the browser. But this didn't exist until the release of Vue CLI 3.

With Vue CLI 3's instant prototyping you can just do that. You can, for example, create two files: App.vue and MyTestComponent.vue, implement them the same way you would do in a full vue project, and then just run:

vue serve App.vue

The great thing about this feature is that it works like a complete webpack vue project. So you can add local dependencies in package.json and import libraries and other vue components with ES6 import ? from '?' syntax. So everything just works out of the box!

#Installing it

In order to use this command, you have to first make sure you have Vue CLI installed on your machine. Once you have that, install this global add-on:

npm install -g @vue/cli-service-global

That's it! Now you can run vue serve and test your ideas in no time.

You can check the docs for more information.