Vue 3 is the latest version of the extremely popular Vue.js framework. While there are multiple ways of setting up a VueJS application, we will be looking at the quickest way to create your first Vue 3 application in this post.
The advantage of this approach is that you can quickly start a Vue Project and begin with the process of actually implementing features. This is great for an iterative approach where you want to try out Vue.js without going through too much hassle.
1 – Create a Project Directory
In the first step, we will create a project directory.
$ mkdir vue3-first-app
$ cd vue3-first-appWithin the directory, we will create an index.html file.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 Demo App</title>
</head>
<body>
<h2>Hello, World</h2>
</body>
</html>As you can see, this is a very basic index.html file.
2 – Import Vue 3 CDN Package
In this step, we will import Vue 3 package available at Unpkg CDN. See below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3.0.2"></script>
<title>Vue3 Demo App</title>
</head>
<body>
<h2>Hello, World</h2>
</body>
</html>Here, we have added the vue@3.0.2 as a script. You can also choose other versions depending on requirement. We can also use vue@next in case we want to try the latest experimental version. However, it is not recommended for a possible production application.
While this approach may not be ideal for a production application, it is a great approach for development phase.
3 – Create the Vue App
We can now create a Vue app and mount the same within our DOM.
The great part about this approach is that we can control a small part of our web page using Vue.js while the other parts can continue normally. This also lends well to the incremental approach that Vue supports where an application can be migrated to Vue in small steps rather than making drastic changes.
To demonstrate this, we will create a new file app.js within our project directory.
const app = Vue.createApp({
template: '<h3>This is template from Vue</h3>'
})
app.mount('#app')Here, we use the createApp() function available as part of the Vue object. This object is part of the Vue.js library from the CDN.
The createApp() function takes an object as input. Basically, this is where we can define the data requirements, click handlers and also the template for the Vue part of our application. As you can see, we start with declaring a template to specify some markup in the string format.
The createApp() function returns an application instance. We store this instance in the constant app. Then, we mount the instance to the app element in our DOM.
This app element is defined in the index.html as below using id:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3.0.2"></script>
<title>Vue Demo App</title>
</head>
<body>
<h2>Hello, World</h2>
<div id="app"></div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>We also include the app.js using another script tag. With this change, our application is ready. The <div> with id app is the section of the application that is controlled by Vue.
4 – Serving the Vue App
We can serve the Vue application in development mode using the live-server. The advantage of doing this is to get an idea on how our application behaves when being served by a real web server.
To use live-server, we can first install globally and then start it from the project folder.
$ npm install -g live-server
$ live-server .The live-server will start our application on http://localhost:8080. It will serve the index.html which will in turn load the Vue library and our app.js.
Conclusion
With this, we have successfully created our first Vue 3 application. In this post, we the Vue 3 CDN example to demonstrate our approach of quickly starting a Vue application.
If you have any comments or queries about this post, please feel free to mention in the comments section below.
0 Comments