DEV Community

Matt Williams for Tech Dev Blog

Posted on • Originally published at techdevblog.io on

Vue-tiful Beginnings: A Beginner's 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

Welcome to the world of Vue.js! If you're new to this amazing JavaScript framework, you're in for a treat. With Vue.js, 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 project. You'll need to have Node.js 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 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 project:

vue create my-project

Enter fullscreen mode Exit fullscreen mode

This will create a new Vue.js 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

Enter fullscreen mode Exit fullscreen mode

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 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 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>
  `
});

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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 component.

Serve a Vue.js app locally

Now that we have our HTML and Vue.js 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

Enter fullscreen mode Exit fullscreen mode

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 component!

Customise your app

Now let's add some customisation to our app. Vue.js 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>
`

Enter fullscreen mode Exit fullscreen mode

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();
  }
}

Enter fullscreen mode Exit fullscreen mode

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>
`

Enter fullscreen mode Exit fullscreen mode

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!';
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

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>
`

Enter fullscreen mode Exit fullscreen mode

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 web app. With Vue.js, 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 – the possibilities are endless!

Top comments (0)