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 vuenoob.com, 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.
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 in 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, choosing how to run VueJS 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 of doing it.
Without build tools
For a simple app, or when you are just starting with VueJS, 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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Start Learning VueJs</title>
</head>
<body>
<div id="app"> {{ msg }} </div>
<script src="https://unpkg.com/vue@3"></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 VueJS library in the script tag <script src="https://unpkg.com/vue@3"></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 offline 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 offline, I would advise that you download that file, by visiting https://unpkg.com/vue@3 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/vue@3"></script> to reflect the VueJS 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 VueJS without having Internet connectivity, all you need, is to attach the local VueJS 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 VueJS project, run the following on you terminal.
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest 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 VueJS 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.
Here's a recap of what we've learnt:
- There are two ways to run VueJs code locally. One is with and the other without build tools.
- Running VueJs without build tools involves the addition of the VueJs library to HTML markup just as we would with any other JavaScript plugin we've used previously.
- Running VueJs with build tools requires the installation of NodeJs in our machines, it also comes with hot reloading out of the box.
Happy hacking Web Devs.
Top comments (0)