Vue.js Basics for Beginners: Quick Start Guide to Build Your First App

Hello everyone! 👋
I’m excited to share a quick introduction to Vue.js 3 a popular JavaScript framework that makes building web applications easy and fun. Whether you’re new to frontend development or just curious about Vue, this post will give you the basics to get started quickly.

What is Vue.js?

Vue.js is a progressive JavaScript framework used to build user interfaces and single-page applications. It’s known for being

• Easy to learn: Its syntax is simple and straightforward
• Flexible: You can use it to build small interactive parts of a webpage or large-scale apps
• Fast and lightweight: Vue apps perform well and load quickly
• Supported by a strong community: Lots of plugins, tools, and tutorials available

How to Get Started with Vue.js

Step 1: Install Node.js and npm

Before using Vue CLI, make sure you have Node.js and npm installed on your computer.

Step 2: Install Vue CLI globally

Open your terminal or command prompt and run

npm install -g @vue/cli

Step 3: Create a new Vue project

Run the command

vue create my-vue-project

Choose the default preset or customize it as you prefer.

Step 4: Run your Vue app

Navigate to your project folder and start the development server.

cd my-vue-project
npm run serve

Open your browser and go to http://localhost:8080 to see your new Vue app running!

Example

Here’s a tiny Vue component to show a message and change it when a button is clicked.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'You clicked the button!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
button {
  padding: 8px 16px;
  font-size: 16px;
}
</style>