If you are new to js often times simple test code is shown in an online code editor like jsfiddle.net. It’s a great way to quickly get up and running on the desired task like your great Hello World example. But then how do you move that code to a served web page?

Of course there are many ways. You could use node and npm  There are better methods for the long term if you are building say a full app but if you want to dump your test code on your own server because you need access to other local resources like you images directory then this is one method to copy the Vue.js code.

When using a simple Vue.js code and using a CDN to load Vue you must do a couple things in a single HTML page.

  1. load the Vue.js CDN
  2. load the new Vue function when the page loads (window.onload is one method)
  3. It’s good practice to also hide all the elements when loading with the v-cloak directive. This way your Vue code doesn’t splash on the browser while Vue is doing its work.

Here’s that great fiddle.

jsfiddle

https://jsfiddle.net/trodzen/pz3gbmjm/

Here’s the code when moved to a single HTML page run on an AWS Linux Apache server.

vue
Gist Github code

Obviously, this is a very simple task. This shows a quick way to move a section of code to your own server for further development. The window.load function runs your Vue code. The v-cloak directives also hide your code until Vue is done loading.

The original purpose of the Hello World jsfiddle was to load “Hello World” in the data in the message variable. Vue then replaces code in the DOM inside {{ }} (“mustache”) variables with the data. But more importantly, this creates a reactive link to that Vue “message” variable so the data can be changed.

Advertisements