Hello World in Vue.js

Vue.js is a progressive JavaScript framework used for building user interfaces. It is designed to be incrementally adoptable and can also function as a web application framework. In this tutorial, we’ll create a simple “Hello World” application in Vue.js to get you started.

Prerequisites

• Basic understanding of HTML, CSS, and JavaScript
• Node.js installed on your machine
• npm (Node Package Manager) or Yarn installed

Table of Contents

1. Create a Vue.js Project
2. Create a Hello World Component
3. Use the Hello World Component
4. Run the Application
5. Conclusion

1. Create a Vue.js Project

First, we’ll use Vue CLI (Command Line Interface) to create a new Vue.js project.

If you haven’t installed Vue CLI yet, you can install it globally via npm:

npm install -g @vue/cli

Then, create a new Vue.js project named “hello-world”:

vue create hello-world

Follow the prompts to select the default preset or manually select features. For this tutorial, we’ll use the default preset.

Navigate into the newly created project directory:

cd hello-world

2. Create a Hello World Component

In Vue.js, components are reusable and self-contained units of code that define the behavior and appearance of parts of your application. Let’s create a “HelloWorld” component.

Create a new file src/components/HelloWorld.vue:

<!-- src/components/HelloWorld.vue -->

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

In this component:

• The template section defines the HTML structure of the component.
• The script section contains the JavaScript logic. We’re using data to define a message property.
• The style section defines component-specific styles with the scoped attribute.

3. Use the Hello World Component

Now that we’ve created the “HelloWorld” component, let’s use it in our main application.

Open src/App.vue:

<!-- src/App.vue -->

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}
</style>

In this file:

• We import the HelloWorld component.
• Inside the components section, we register the HelloWorld component so we can use it in the template.
• We use the HelloWorld component within the main App.vue template.

4. Run the Application

Now we’re ready to run our Vue.js application:

npm run serve

This command will start a local development server. Open your browser and go to http://localhost:8080. You should see the “Hello, Vue.js!” message displayed.

5. Conclusion

You’ve successfully created a simple “Hello World” application in Vue.js! You learned how to create a Vue.js project using Vue CLI, create a component with a template, script, and style sections, and use the component in the main application.

Vue.js provides a powerful and flexible way to build user interfaces and applications. This example barely scratches the surface of what Vue.js can do. Explore Vue.js further by reading the official documentation and trying out more features and concepts.

Additional Resources:

• Vue.js Documentation
• Vue CLI Documentation
• Vue.js Style Guide