How to create a hello world example in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To create or set up the hello world example in vueJS, we are using the VueJS Component with props message, Using the Component props we are showing the “Hello World” string.

Today I am going to show you How you create a hello world example in VueJS.

Table of contains

• Install vue-cli globally
• Create vue Project
• Run the Project
• Pass the msg as props
• Show the Props in Component

Let’s start today’s tutorial How do I create a hello world example in VueJS?

Install vue-cli globally

First of all, you need to install the NodeJS In your system. You can download and install the application from the NodeJS official website. After that need to install the vue-cli globally in our system.

For that we are using this command npm install -g @vue/cli, It will take some time to install all the packages in our system.

After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

To verify that it is properly installed or not. we are using the following command:

vue --version

Create vue Project

To create the vue hello world project, we are using the following command:

vue create hello-world

It will be asked you for which version Vue 3 OR Vue 2 to install

Run the Project

After the installation of all packages is done. It will give you the two commands to start the project:

The first command will be cd hello-world and the second command will be npm run serve.

Run the Project

Using the cd hello-world go to vue project folder. To run the project using this npm run serve command:

You can go to the browser and run the project on Local http://localhost:8080/

Pass the msg as props

In the project, the folder goes to App.vue change some code and run the project:

<template>
  <HelloWorld msg="Hello World" />
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Show the Props in Component

Show the props message in HelloWorld.vue component which is inside the ./src/components/

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Let’s check the output of the hello world examples.

Output

All the best 👍.