In this blog post, we’ll be talking about how to create and run a Vue.js project. We’ll be talking about how to use Vue as an external library; and then we’ll take a look at the Vue CLI and Vite, two of the most used compilers for Vue applications.
Finally, we’ll talk about the differences between running a project locally and compiling it in order to upload to a server.
If you’re trying to learn how to use Vue.js, you’re in the right place!
How to run Vue: is there a right way?
As you might’ve guessed, there are different ways to run Vue. This is often the case with most SPA frameworks like React and libraries like jQuery, although in the case of Vue this is specially true.
When you’re trying to add Vue to a new or existing web app, you can either use it as an external library or use a compiler like the Vue Cli or Vite. Each one comes with a series of advantages and disadvantages, and also present a few differences in the way they allow us to run a project locally and to compile it for production before uploading it to a server.
In this blog post, we’ll be going over all of these methods so that you can learn how to create and run a Vue.js project effectively!
Vue as an external library
Let’s start with the first method: using Vue as an external library. This means that you’ll be including the Vue file in your project via a <script> tag, just like any other external JavaScript library. As per the official documentation, you can simply do the following:
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>The advantage of this method is that it’s the easiest way to get started with Vue.js. All you need to do is include the Vue.js file in your project and you’re good to go!
It can be as simple as this.
However, there are also a few disadvantages to using Vue as an external library. For one, you won’t be able to use certain features that are only available in the Vue CLI or Vite. This means that if you want to use those features, you’ll have to switch to one of those compilers. For example, it will be much harder to add third party tools like a router, or a state manager like Pinia.
Another disadvantage is that you won’t be able to take advantage of the benefits of having a compiler, like being able to use pre-processors such as TypeScript or Sass. This means that you’ll either have to use vanilla JavaScript and CSS, or find a way to compile your project before uploading it to a server.
Using the Vue CLI
That leads us to the Vue CLI, which is basically a command line interface tool that you can use to initialize and manage your Vue projects. It’s been designed around the needs of developers who want a simple yet powerful tool to initialize and manage their SPAs.
The Vue CLI makes it very easy to work with Vue applications. It provides a clear boilerplate structure for your project, and it comes with a variety of tools that makes development easier, such as linting, testing, and debugging tools.
In order to use the Vue CLI, you’ll first need to install it globally via your preferred package manager, either NPM or Yarn.
npm i -g vue-cliOnce you have it, you can simply use the command vue create in order to start a new project.
The CLI will ask you a few questions regarding your project, such as the package manager you want to use, the features you want to include, etc. Once you answer those questions, it will automatically generate the boilerplate code for your project and install all the dependencies that you need.
This is a big advantage over using Vue as an external library, as it saves you a lot of time and can give you a great starting point for your projects.
Vite: a new alternative
Vite is a build tool that doesn’t use Webpack under the hood, which allows it to cut down on build times by only compiling the files that have changed. This can make a big difference in build times for large projects.
As such, Vite can be seen as an alternative to the Vue CLI. However, it’s important to note that Vite is still not an official tool, which means that it might not be as stable as the Vue CLI.
Vite is also opinionated in the way that it structures projects. This means that you might have to spend some time adding external packages like the Vue Router or any state manager that you might want to use; and also, it only works with Vue 3 at the moment.
However, if that doesn’t bother you, then Vite can be a great tool to use for your Vue projects.
Using Vite is as simple as installing it globally via your preferred package manager:
npm i -g viteAnd then running the command npm run vite in your terminal. The tool will allow you to choose the framework you want to use, and it will set up the project for you.
Which method should you use?
Now that we’ve gone over the three different methods of setting up a Vue project, you might be wondering which one is the best option for you.
The answer to that question depends on your needs. If you need a simple way to create a Vue project, then using the Vue CLI is probably your best bet.
However, if you’re looking for a faster way to build projects, or you want to use Vue 3, then you should give Vite a try.
And finally, if you’re looking for a more lightweight way to use Vue, then using the library directly might be the best option for you.
No matter which method you choose, setting up a Vue project is relatively simple and only takes a few minutes. So why not give it a try?
💬 Leave a comment