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.