How to Create the First Page in Vue.js?

Last updated on September 26, 2022

In this article, we will create a page in the Vue.js application. In case you haven’t installed the Vue.js application, you can follow our article that helps you to install the Vue.js application. Once the installation process is done you need to know the file structure. It is necessary to have an understanding of the Vue.js file structure before going into detail.

vue-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├──├── logo.png
│   ├── components
│   ├──├── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .browserslistrc
├── .eslintrc
├── babel.config
├── package.json
├── package-lock.json

Node Module Directory

In the above file structure, the node_mudules directory is the first directory for node packages. In the node environment, we often install third party libraries, frameworks, packages, etc. Node saves all packages inside the node_modules directory.

Public Directory

In the second position, we have a public directory that contains an HTML file (index.html) and favicon. Vue web Application runs through this HTML page. Open this file in the HTML editor you will see a div element with the ID App, the whole web application is bound with this div element.

Source (SRC) Directory

SRC or source directory is in the third position that contains components and assets.

Create First Page in Vue.js

To create your own page, add a new file in the SRC directory, HomePage.vue. The file name should follow the pascal naming convention.

Note: in the pascal case we write the first letter in uppercase of each word in the phrase e.g. HomePage.

<template>
    <div>{{message}}</div>
</template>
<script>
export default {
   data(){
    return{
        message:"Hello World"
    }
   }
}
</script>

In the Vue template, we start and close the document with the <template> tag. Inside the template tag, we can add HTML elements with variables whose data comes from Vue Instance.

Export Default

The export statement refers to exporting a module that can be either function or variable. In JavaScript, we can export and import modules. A module must be exported before importing into any component. There are two types of export.

Export with Name: If you export a module with any specific name (export Home) then it will be imported with the same name.
Export Default: It can be imported with any name.

Next, go to the main.js file and paste the following code

import { createApp } from 'vue'
import App from './HomePage.vue'

createApp(App).mount('#app')

Once you paste code into both files (HomePage.Vue and main.js), you will be able to see the result. In the main.js we imported Vue and HomePage components with createApp and App aliases. Then we pass App into the Vue instance and bind it with the div element using the mount() method of Vue.js.

Conclusion

In this article, we learned about creating the page in Vue.js and also its structure. If you would like to learn more about it, check out our Vue.js Page.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: