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:
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!
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.