Skip to main content

Creating Your First Vue.js Application

Getting Started with Vue.js: Creating Your First Vue.js Application

Vue.js is a progressive JavaScript framework that is used to develop interactive web interfaces. It's lightweight, easy to learn, and fun to use. In this tutorial, we will walk you through the process of creating your first Vue.js application. We'll start from the basics, so no prior knowledge of Vue.js is required.

What You Will Need​

Before we begin, make sure you have the following installed on your system:

  • Node.js and npm. Node.js is a JavaScript runtime that is used to run JavaScript on a server instead of in a browser. npm is a package manager for Node.js. You can download both from the official Node.js website.

  • Visual Studio Code, or any text editor of your choice.

Setting Up Your Project​

The first step in creating a Vue.js application is to set up your project. Vue provides a CLI (Command Line Interface) tool that helps to create and manage projects. To install the Vue CLI, open your terminal and run:

npm install -g @vue/cli

After the installation, you can create a new Vue.js project by running:

vue create my-first-vue-app

Replace 'my-first-vue-app' with the name of your project. This command will create a new folder with the specified name and set up a basic Vue.js project in it.

Understanding the Project Structure​

Let's take a look at the structure of the project that Vue CLI created for us:

  • node_modules: This directory contains all the dependencies of your project.

  • public: This directory contains the static assets of your project.

  • src: This is the directory where you will be working most of the time. It contains your Vue components and the main.js file, which is the entry point of your application.

  • package.json: This file contains the list of dependencies and scripts for your project.

Creating Your First Component​

Components are the building blocks of Vue.js applications. Let's create a simple Vue component.

In the src/components directory, create a new file and name it HelloWorld.vue. Then, add the following code to it:

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

This is a simple Vue component that renders a 'Hello, Vue!' heading.

Displaying Your Component​

To display your HelloWorld component, you need to import it in the App.vue file and use it in the template.

Update the App.vue file as follows:

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

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Running Your Application​

To run your application, go back to your terminal, make sure you are in your project directory, and run:

npm run serve

This command will start a development server, and you can view your application by opening http://localhost:8080 in your web browser.

Congratulations! You just created and ran your first Vue.js application. As you continue your journey with Vue.js, you will learn more about its features and capabilities, and you will be able to build more complex and interactive web applications. Happy coding!