Jessica Brown

Vue.js is a versatile and progressive JavaScript framework for building user interfaces. Its simplicity and powerful features make it an excellent choice for modern web applications. In this article, we will walk through creating a VueJS application from scratch on both Windows and Linux.

Prerequisites

Before starting, ensure you have the following tools installed on your system:

For Windows:

1. Node.js and npm
   • Download and install from Node.js official website.
   • During installation, ensure you check the option to add Node.js to your system PATH.
   • Verify installation:

     node -v
     npm -v
     

2. Command Prompt or PowerShell
   • These are pre-installed on Windows and will be used to execute commands.
3. Vue CLI
   • Install globally using npm:

     npm install -g @vue/cli
     

   • Verify Vue CLI installation:

     vue --version
     

For Linux:

1. Node.js and npm

   • Install via package manager:

     curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
     sudo apt install -y nodejs
     

   • Replace 18.x with the desired Node.js version.
   • Verify installation:

     node -v
     npm -v
     

2. Terminal

   • Pre-installed on most Linux distributions and used for executing commands.

3. Vue CLI

   • Install globally using npm:

     npm install -g @vue/cli
     

   • Verify Vue CLI installation:

     vue --version
     

4. Curl

   • Required for downloading Node.js setup scripts (pre-installed on many distributions, or install via your package manager).

5. Code Editor (Optional)

   • Visual Studio Code (VSCode) is highly recommended for its features and extensions. Install extensions like Vetur or Vue Language Features for enhanced development.

Step-by-Step Guide

1. Setting Up VueJS on Windows

Install Node.js and npm

1. Download the Windows installer from the Node.js website and run it.
2. Follow the installation wizard, ensuring npm is installed alongside Node.js.
3. Verify installation:

   node -v
   npm -v
   

Install Vue CLI

1. Open a terminal (Command Prompt or PowerShell) and run:

   npm install -g @vue/cli
   vue --version
   

Create a New Vue Project

1. Navigate to your desired directory:

   cd path\to\your\project
   

2. Create a VueJS app:

   vue create my-vue-app
   

   • Choose "default" for a simple setup or manually select features like Babel, Vue Router, or TypeScript.
3. Navigate into the project directory:

   cd my-vue-app
   

4. Start the development server:

   npm run serve
   

5. Open http://localhost:8080 in your browser to view your app.

2. Setting Up VueJS on Linux

Install Node.js and npm

1. Update your package manager:

   sudo apt update
   sudo apt upgrade
   

2. Install Node.js:

   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
   sudo apt install -y nodejs
   

   Replace 18.x with the desired Node.js version.
3. Verify installation:

   node -v
   npm -v
   

Install Vue CLI

1. Install Vue CLI globally:

   npm install -g @vue/cli
   vue --version
   

Create a New Vue Project

1. Navigate to your working directory:

   cd ~/projects
   

2. Create a VueJS app:

   vue create my-vue-app
   

   • Choose the desired features.
3. Navigate into the project directory:

   cd my-vue-app
   

4. Start the development server:

   npm run serve
   

5. Open http://localhost:8080 in your browser to view your app.

Code Example: Adding a Component

1. Create a new component, HelloWorld.vue, in the src/components directory:

   <template>
     <div>
       <h1>Hello, VueJS!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: "HelloWorld",
   };
   </script>
   
   <style scoped>
   h1 {
     color: #42b983;
   }
   </style>

    

2. Import and use the component in src/App.vue:

   <template>
     <div id="app">
       <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from "./components/HelloWorld.vue";
   
   export default {
     name: "App",
     components: {
       HelloWorld,
     },
   };
   </script>

    

Code Example: MVVM Pattern in VueJS

The Model-View-ViewModel (MVVM) architecture separates the graphical user interface from the business logic and data. Here's an example:

Model

Define a data structure in the Vue component:

export default {
  data() {
    return {
      message: "Welcome to MVVM with VueJS!",
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};

View

Bind the data to the template:

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Counter: {{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

ViewModel

The data and methods act as the ViewModel, connecting the template (View) with the business logic (Model).

Tips

• Use Vue DevTools for debugging: Available as a browser extension for Chrome and Firefox.
• Leverage VSCode extensions like Vetur or Vue Language Features for enhanced development.

The Model-View-ViewModel (MVVM) architectural pattern is widely used in modern software development for creating applications with a clean separation between user interface (UI) and business logic. Originating from Microsoft's WPF (Windows Presentation Foundation) framework, MVVM has found applications in various programming environments, including web development frameworks like Vue.js, Angular, and React (when combined with state management libraries).

What is MVVM?

The MVVM pattern organizes code into three distinct layers:

1. Model

The Model is responsible for managing the application's data and business logic. It represents real-world entities and operations without any concern for the UI.

• Responsibilities:
  • Fetching, storing, and updating data.
  • Encapsulating business rules and validation logic.
• Examples:
  • Database entities, APIs, or data models in memory.

2. View

The View is the visual representation of the data presented to the user. It is responsible for displaying information and capturing user interactions.

• Responsibilities:
  • Rendering the UI.
  • Providing elements like buttons, text fields, or charts for user interaction.
• Examples:
  • HTML templates, XAML files, or UI elements in a desktop application.

3. ViewModel

The ViewModel acts as a mediator between the Model and the View. It binds the data from the Model to the UI and translates user actions into commands that the Model can understand.

• Responsibilities:
  • Exposing the Model's data in a format suitable for the View.
  • Implementing logic for user interactions.
  • Managing state.
• Examples:
  • Observable properties, methods for handling button clicks, or computed values.

Why Use MVVM?

Adopting the MVVM pattern offers several benefits:

1. Separation of Concerns:

   • Clear boundaries between UI, data, and logic make the codebase more maintainable and testable.

2. Reusability:

   • Components such as the ViewModel can be reused across different views.

3. Testability:

   • Business logic and data operations can be tested independently of the UI.

4. Scalability:

   • Encourages modularity, making it easier to scale applications as they grow.

MVVM in Practice: Example with Vue.js

Scenario

A simple counter application where users can increment a number by clicking a button.

Implementation

Model

Defines the data and business logic:

export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};

View

The template displays the UI:

<template>
  <div>
    <h1>Counter: {{ counter }}</h1>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

ViewModel

Binds the Model to the View:

export default {
  name: "CounterApp",
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};

Best Practices for Implementing MVVM

1. Keep Layers Independent:

   • Avoid tightly coupling the View and Model. The ViewModel should act as the sole intermediary.

2. Leverage Data Binding:

   • Utilize frameworks or libraries with robust data binding to keep the View and ViewModel synchronized seamlessly.

3. Minimize ViewModel Complexity:

   • Keep the ViewModel focused on presenting data and handling user interactions, not complex business logic.

4. Test Each Layer Separately:

   • Write unit tests for the Model and ViewModel and UI tests for the View.

When to Use MVVM?

MVVM is ideal for:

• Applications with complex user interfaces.
• Scenarios requiring significant state management.
• Teams where developers and designers work independently.

Conclusion

The MVVM pattern is a robust architectural solution for creating scalable, maintainable, and testable applications. By clearly separating responsibilities into Model, View, and ViewModel layers, developers can build applications that are easier to develop, debug, and extend. Whether you're working on a desktop application or a modern web application, understanding and implementing MVVM can significantly enhance the quality of your codebase.

Start applying MVVM in your projects today and experience the difference it can make in your development workflow!

List By: Miko Pawlikowski 
Descriptions By: Jessica Brown
Published: December 29, 2024

Software engineering is a discipline that balances technical precision, creativity, and collaboration. These 17 subtle rules provide insights to improve the quality of code, foster teamwork, and guide sustainable practices.

These rules aren't hard-and-fast laws but guiding principles to help software engineers navigate the complexities of their craft. Adopting them can lead to better code, smoother collaborations, and more resilient systems.