Building Modern Mobile Apps with Vue.js: A Practical Methodology

Bradeley Chung Chow Wei

6 months ago

1. Introduction to Vue.js

Vue.js is one of the most popular front-end JavaScript frameworks, known for its simplicity, flexibility, and developer-friendly learning curve. Unlike heavy frameworks that demand strict patterns, Vue provides a progressive approach—you can start small by adding Vue to an existing project, or build a full-scale single-page application (SPA) with advanced tooling. At its core, Vue focuses on reactivity, meaning your UI updates automatically whenever the underlying data changes. This makes it ideal for creating responsive mobile-style web
applications or Progressive Web Apps (PWAs). For teams or individual developers looking for a straightforward, flexible framework to bring mobile app ideas to life, Vue offers both the methodology and the tools to design, implement, and deploy effectively. In this article, we’ll walk through a methodology for mobile app development using Vue.js—covering the idea stage, implementation with Vue’s lifecycle hooks and routing, and finally testing and deployment.

It’s recommended for you to refer to this Github Repository for further guidance, since this article is based off of that project as well.

Methodology: From Idea to Deployment

Building a mobile app with Vue doesn’t have to be complicated. Here’s a streamlined methodology:

1. Define the Idea – Clarify the app’s purpose (e.g., task management, fitness tracker, or e-commerce)/
2. Choose the Approach – Vue can be used for responsive web apps, SPAs, or PWAs (mobile-ready apps with offline support).
3. Design Templates – Use Vue’s single-file components (.vue files) for a structured
4. UI. Templates define your layout, and you can easily reuse them across your app.
5. Set Up Routing – Use Vue Router to navigate between pages/screens with meta options like authentication requirements.
6. Implement Lifecycle Hooks – Control how your app initializes and reacts (e.g., using onMounted, beforeMount, etc.).
7. Test and Debug – Run local builds and test across multiple devices for responsive design.
8. Deploy – Deploy as a PWA, making the app installable on any mobile device directly from the browser.

2. Idea Stage: Planning Your App

Every good app begins with a simple idea. For example:

A Todo App to manage tasks offline and online.
A Health Tracker that logs workouts and syncs across devices.
A Shopping App with route protection for authenticated users only.

Once you have the concept, Vue allows you to translate that into modular components. Think of each part of your app (header, task list, login form) as a building block.

3. Implementation with Vue.js

For this step, we are going to use VSCode as our IDE

Fresh installation of VueJS project

Disclaimer: If you already have referred to the Github project linked below, you do not need to read this part.

Create a folder for your project, for this one, we are going to name it vue_test. Open the folder in VScode and type this command:

We are just going to name it my–page for now. For this tutorial, make sure to NOT select Typescript since the project primarily was done in vanilla Javascript. Of course, feel free to do so if you are familliar with that flavor of Javascript. It is recommended for you to choose prettier for formatting and ESLint as your linter. It makes the coding much more pleasing to look at. Next, type cd (folder-name here). In this case, we are going to do cd my-page. Afterwards, type npm i, then npm run dev. Congrats! You have successfully run your first Vue instance.

Templates

Now it’s time for the pages. Vue uses a template system, meaning each page is defined via .vue file, that represents a block of frontend code (HTML, Javascript, and et cetera). To make it practical, you should always strive for making identifiable templates for each page. For example: We want to make a Home, About , and Products page for our app.

So, we need to first make the template files for them.

<template> 
  <div> 
    <h1>Welcome to My Vue App > </h1>
 </h1> 
    <p>This is a simple demonstration of Vue 3 with routing.</p> 
  </div> 
</template

Home.vue

<template> 
  <div> 
    <h1>About This App</h1> 
    <p>This Vue.js application is built using Vue 3 and Vite. It 
demonstrates routing and basic page components.</p> 
  </div> 
</template>

About.vue

script setup> 
const products = [ 
  { id: 1, name: 'Vue T-Shirt', price: '$20' }, 
  { id: 2, name: 'Vue Mug', price: '$10' }, 
  { id: 3, name: 'Vue Sticker Pack', price: '$5' } 
] 
</script> 
<template> 
  <div> 
    <h1>Products</h1> 
    <ul> 
      <li v-for="product in products" :key="product.id"> 
        {{ product.name }} - <strong>{{ product.price }}</strong> 
      </li> 
    </ul> 
  </div> 
</template>

Products.vue

Linking the templates together

Now that we have done Now that we have done all 3 pages, we need to find a way for Vue to provide a way for us to navigate to each of the 3 pages. To do this, we need to define a main page on App.vue

<template> 
<div> 
<nav style="padding: 10px; background: #42b983; color: white;"> 
<router-link to="/" style="margin-right: 15px; color: 
white;">Home</router-link> 
<router-link to="/about" style="margin-right: 15px; color: 
white;">About</router-link> 
<router-link to="/products" style="color: 
white;">Products</router-link> 
</nav> 
<main style="padding: 20px;"> 
<router-view /> 
</main> 
</div> 
</template>

App.vue

Routing & Protection

Another part of the Vue.js framework is Vue Router. It allows you to code in navigation, or routes towards specific pages of your website. Aside from that, you can use what’s called “meta fields” to authenticate the users in certain pages:

import { createRouter, createWebHistory } from 'vue-router' 
import Home from '../pages/Home.vue' 
import About from '../pages/About.vue' 
import Products from '../pages/Products.vue' 
import Login from '../pages/Login.vue' 
const routes = [ 
  { path: '/', redirect: '/login' }, 
  { path: '/login', component: Login }, 
  { path: '/home', component: Home, meta: { requiresAuth: true } }, 
  { path: '/about', component: About, meta: { requiresAuth: true } }, 
  { path: '/products', component: Products, meta: { requiresAuth: true 
} }, 
] 
const router = createRouter({ 
  history: createWebHistory(), 
  routes, 
})

For this code, you need to refer to src/router/index.js that’s been provided in the project files. The file will also appear when you create the project for the first time. This ensures protected routes are only accessible when conditions are met (such as login being required before entering the page).

For the sake of simplicity, the authentication willbe hardcoded and involves no backend. What we are going to show you is how the meta tags work for each route.

let isAuthenticated = false 
// Route guard 
router.beforeEach((to, from, next) => { 
  if (to.meta.requiresAuth && !isAuthenticated) { 
    next('/login') 
  } else { 
    next() 
  } 
}) 
export function loginUser() { 
  isAuthenticated = true 
} 
export function logoutUser() { 
  isAuthenticated = false 
}

Disclaimer: for functions that are responsible for setting the login and logout state, it’s recommended to do it in a separate file.

Lifecycle Hooks

This is an important concept to grasp for any frameworks. Essentially, you are trying to manipulate and manage the data within specific periods. Before, During, and After a page has been loaded. This is useful for fetching data from an API, where data is needed at different moments of usage when using the website.

import { onMounted, onBeforeMount } from "vue";
export default {
    setup() {
        onBeforeMount(() => {
            console.log("Component is about to mount");
        });
        onMounted(() => {
            console.log("Component is mounted and ready");
        });
    }
};

Best Practices for Vue.js Development

When developing mobile applications with Vue.js, following best practices ensures cleaner code, better performance and easier scalability.

1. Component Reusability
  ○ Break down your UI into small, reusable components.
2. Use Vue CLI and Project Structure
  ○ Maintain a clear folder structure (e.g., components/, views/, store/, assets/) to keep the project organized.
3. Efficient Routing
  ○ Use Vue Router for navigation between views.
  ○ Implement route guards (beforeEnter, meta.requiresAuth) for authentication and role-based access.
4. Testing and Debugging
  ○ Use Vue Test Utils for unit testing components
  ○ Integrate Cypress or Jest for end-to-end testing of app flows.
5. Security Best Practices
  ○ Use route meta fields for authorization.
  ○ Sanitize user input to prevent XSS attacks.
  ○ Avoid exposing sensitive environment variables in the frontend.

4. Testing and Deployment

After building your app locally, you can:

● Test on multiple devices by serving locally (npm run serve) and opening on your phone. Make sure that your computer and phone are connected to the same network via WiFi
● Build for production with npm run build.
● Deploy as a PWA using Vue CLI’s PWA plugin or VitePWA. This makes your app installable like a native app with offline caching.

Deployment Considerations: Editing the vite.config.js

When building a Vue.js app with Vite, you often need to connect your frontend to the backend to access APIs. During lcoal development, you need to edit your vite.config.js file.

 server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^/api/, '/api'), // Preserve '/api' prefix
      }

Why This Matters

- Local Development: This ensures your Vue app can call APIs on your backend server without CORS issues.

- Production Deployment: When deploying, you typically won’t rely on Vite’s dev proxy. Instead, you’ll configure your server or reverse proxy to handle /api routes.

Best Practice

- Keep your development proxy in vite.config.js for ease of testing.

- For deployment, ensure your backend (e.g., https://yourdomain.com/api) is properly set up so the frontend communicates directly with the production API.

Optionally, you can use environment variables to switch API endpoints between localhost (development) and your production server. Example using environment variables:

const apiBaseUrl = import.meta.env.VITE_API_URL;
fetch(`${apiBaseUrl}/users`)
  .then(res => res.json())
  .then(data => console.log(data));

And in your .env files:

#.env.development
VITE_API_URL=http://localhost:8080/api

This way, you don’t need to hardcode URLs or modify vite.config.js when moving from development to production—everything is managed by environment-specific configuration.

Conclusion

Vue.js isn’t just a framework—it’s a methodology for building modern mobile-ready apps. Its combination of templates, lifecycle hooks, and routing (with authentication protection) provides a clean and scalable workflow. By following the methodology from idea → implementation → testing → deployment, developers can confidently build and ship apps that feel at home on mobile devices.

Whether you’re creating a lightweight PWA or a complex app with user accounts, Vue offers the tools to move smoothly from concept to launch.