Vue-tiful Beginnings: A Beginner's Guide to Creating and Customising Your First Vue.js Web App
Tags: vue, frontend, javascript, beginners
Published: 2023-01-10 01:14:20

---
title: Vue-tiful Beginnings: A Beginner's Guide to Creating and Customising Your First Vue.js Web App
published: true
date: 2023-01-09 11:54:06 UTC
tags: Vuejs,Frontend,JavaScript,Beginners
canonical_url: https://techdevblog.io/vue-tiful-beginnings-a-beginners-guide-to-creating-and-customising-your-first-vue-js-web-app/
---

 ![Vue-tiful Beginnings: A Beginner's Guide to Creating and Customising Your First Vue.js Web App](https://techdevblog.io/content/images/2023/01/image_0-vue-tiful-beginnings-a-beginners-guide-to-creating-and-customising-your-first-vue-js-web-app.jpg)

Welcome to the world of [Vue.js](https://vuejs.org)! If you're new to this amazing JavaScript framework, you're in for a treat. With [Vue.js](https://vuejs.org), you can easily create and customise your very own web app in no time.

## Get Started

First things first, let's get started by setting up your [Vue.js](https://vuejs.org) project. You'll need to have [Node.js](https://nodejs.org) and npm (the Node Package Manager) installed on your machine. If you don't have these already, head over to the Node.js website and download the latest version.

Once you have [Node.js](https://nodejs.org) and npm installed, open up your terminal and navigate to the directory where you want to create your project. Then, run the following command to create a new [Vue.js](https://vuejs.org) project:

```
vue create my-project

```

This will create a new [Vue.js](https://vuejs.org) project called "my-project" in the current directory. You'll be presented with a few options for setting up your project. For this tutorial, we'll stick with the default configuration. Just press enter to select the default option and let the project set up.

Once your project is set up, you should see a new directory called "my-project" in your current directory. Navigate into this directory by running:

```
cd my-project

```

## Create a web app

Now it's time to start building your web app! In your "my-project" directory, you'll see a file called "main.js". This is the entry point for your [Vue.js](https://vuejs.org) app, and it's where we'll be doing most of our work.

Open "main.js" in your favourite text editor and you'll see some boilerplate code already set up for you. This includes an import statement for the Vue library and a new Vue instance.

To create your first [Vue.js](https://vuejs.org) component, you'll need to define a new Vue object with a template and a data object. The template is the HTML structure for your component, and the data object contains the data that you want to display in your component.

For example, let's create a simple component that displays a greeting message. Add the following code to your "main.js" file:

```
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  },
  template: `
    <div>{{ message }}</div>
  `
});

```

This creates a new Vue instance with a message data property and a template that displays the message. The `el` property specifies the element in your HTML file where the component will be rendered. In this case, it will be rendered in an element with the ID `app`.

Now, let's create an HTML file to display our Vue.js component. In your "my-project" directory, create a new file called "index.html" and add the following code:

```
<!DOCTYPE html>
<html>
  <head>
    <title>My Vue.js App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

```

This HTML file creates a div element with the ID `app`, which is where our Vue.js component will be rendered. It also includes a script tag that loads our "main.js" file, which contains our [Vue.js](https://vuejs.org) component.

## Serve a Vue.js app locally

Now that we have our HTML and [Vue.js](https://vuejs.org) files set up, let's run our app and see our greeting message in action! In your terminal, run the following command:

```
npm run serve

```

This will start a development server and open your app in a new browser window. You should see your greeting message displayed on the page. Congratulations, you've just created your first [Vue.js](https://vuejs.org) component!

## Customise your app

Now let's add some customisation to our app. [Vue.js](https://vuejs.org) offers a number of powerful features that allow you to easily customise and manipulate your components. For example, you can use directives to bind data to your template, use computed properties to perform calculations on your data, and use methods to define custom functions.

Let's start by adding a directive to our template. Directives are special attributes that start with the `v-` prefix and allow you to bind data to your template. For example, the `v-bind` directive allows you to bind data to an element's attributes.

Let's use the `v-bind` directive to bind our message data to the text of a button element. Update your template to the following:

```
template: `
  <div>
    <button v-bind:text="message">Click me</button>
  </div>
`

```

Now when you refresh your app, you should see a button with the text "Hello, world!" displayed on it. Whenever you update the message data property, the button text will automatically update as well.

Next, let's add a computed property to our component. Computed properties are functions that are automatically re-evaluated whenever the component's data changes. They can be used to perform calculations on your data and return a new value.

For example, let's create a computed property that capitalises our greeting message. Add the following code to your Vue instance:

```
computed: {
  capitalisedMessage: function() {
    return this.message.toUpperCase();
  }
}

```

Now you can use the `capitalisedMessage` computed property in your template just like any other data property. Update your template to the following:

```
template: `
  <div>
    <button v-bind:text="capitalisedMessage">Click me</button>
  </div>
`

```

Refresh your app and you should see the button text change to "HELLO, WORLD!".

Finally, let's add a method to our component. Methods are custom functions that you can define in your Vue instance. They can be used to perform actions or manipulate your data in any way you want.

For example, let's add a method that toggles the greeting message between "Hello, world!" and "Goodbye, world!". Add the following code to your Vue instance:

```
methods: {
  toggleMessage: function() {
    if (this.message === 'Hello, world!') {
      this.message = 'Goodbye, world!';
    } else {
      this.message = 'Hello, world!';
    }
  }
}

```

Now you can use the `toggleMessage` method in your template by adding an `v-on` directive to your button element. The `v-on` directive allows you to bind a method to an element's event, such as a click event. Update your template to the following:

```
template: `
  <div>
  <button v-bind:text="capitalisedMessage" v-on:click="toggleMessage">Click me</button>

  </div>
`

```

Refresh your app and try clicking the button. You should see the greeting message toggle between "Hello, world!" and "Goodbye, world!".

## Conclusion

And there you have it! You've just learned how to create and customise your first [Vue.js](https://vuejs.org) web app. With [Vue.js](https://vuejs.org), it's easy to create dynamic, interactive components that make your web app come to life. So go ahead and play around with [Vue.js](https://vuejs.org) – the possibilities are endless!

<!--kg-card-end: markdown-->