How To: Run VueJs Code Locally

Last updated on June 26, 2022. Created on April 2, 2022.


If you have just started learning VueJs and are enjoying the journey with the progressive framework, what might be the best way to perfect the learning process than actually practicing the code. Just watching and reading the tutorials will not get you to where you want to be, you need to get your hands dirty.

So how do we get our hands code-dirty? You might ask.

Well, thanks for asking.

If you have been learning through this site, the code blocks found in the articles give you an option to copy the code inside them or open an external link when provided, to where you can see the code in action.

Copy Code on Vuenoob

Open live code externally on Vuenoob

If you’ve been learning from any other site or resource, then the process is the same, all you need to do is copy the code you are provided, to see if the description of how it works aligns with when you run it.

Try running the code locally or on on-line playgrounds such as StackBlitz and CodePen, whichever you find to be convenient. Modify the code to test more of what you’ve learnt trying your own custom scenarios.

So much talk, can we get to doing what the title says.

Well, running Vue code locally is down to the complexity and size of your app, or just a preference on the way of doing it. This is because there are two main ways to do it.

Without build tools

For a simple app, or when you are just starting with Vue, to avoid much confusion, all you need is a single HTML file inside your project directory. Place your code inside the HTML file and save it.

Next, open that file inside your browser. Most modern browsers support dragging and dropping supported files onto their tabs, they will handle the rest for you.

Let’s take the following example.

Try this!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Start Learning VueJs</title>
  </head>
  <body>
    <div id="app">  </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script>
      let app = Vue.createApp({
        data() {
          return {
            msg: "Hello World!"
          }
        },
      }).mount('#app')
    
</script>
  </body>
</html>

To run the classic “Hello World” app above, all we need is the externally sourced Vue library in the script tag <script src="https://unpkg.com/[email protected]"></script>, and the rest of our Vue code.

Copy the above code into a file, and name it “index.html”.

Place the file inside a directory of your choice, probably one named “projects” or “vue-practice” for arrangement’s sake, then drag-and-drop the “index.html” file onto an open browser window.

If everything was done per these instructions, you should see “Hello World!” on your browser.

What about off-line development?

The above library file is externally hosted on unpkg.com, meaning, you need to have an active Internet connection to access and successfully develop locally with it.

If you want to develop while off-line, I would advise that you download that file, by visiting https://unpkg.com/[email protected] and right clicking on the resulting gibberish page, click save as, and save it inside a “js” directory that you need to create inside the “projects” directory we created above.

Our JavaScript file will likely be in - ‘js/vue.global.js’ relative to “index.html” if you followed the above instructions accurately. Next, modify the <script src="https://unpkg.com/[email protected]"></script> to reflect the Vue library file local location, we should end up with <script src="js/vue.global.js"></script>.

To see the changes in your app, reload the tab on you browser after every update you make to the code.

Here onwards, you can continue developing locally with Vue without having Internet connectivity, all you need, is to attach the local Vue library to your apps.

With build tools

To run Vue locally with build tools, you need to first install NodeJs into your system.

To check if your installation was successful try running node -v in your terminal. If you see an output such as v17.8.0, that means the installation was successful. Check if npm was installed with your version of npm by running npm -v, if you get another output such as 8.5.5 you are ready to proceed. If things don’t go smoothly refer to the NodeJs docs regarding your machine.

To create a new Vue project, run the following on you terminal.

# npm 6.x
npm create [email protected] my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create [email protected] my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

The above shell script will scaffold a new Vue app inside its own directory. All you need to do next is switch into the created directory with your terminal:

cd my-vue-app

And to install the project’s dependencies, run:

# npm
npm run i

# pnpm
pnpm i

After, run the development script with:

# npm
npm run dev

# pnpm
pnpm dev

From here, all you need to do is visit the provided port on your browser and watch the changes occur to your app as you update the code.

Unlike the local development process without build tools, here Vite keeps track of the changes in your code, rebuilds the js bundle and reloads your page for you. You also need not worry about having Internet connectivity, unless you add a node package to your project that requires one.

Subscribe to the VueNoob Newsletter

[[[ noty.message ]]]

By using this site, you agree that you have read and understand its Privacy Policy.