vuejs

Complete deployment guide for vuejs on NStrim

Overview

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer, making it easy to integrate with other libraries or existing projects.

Before You Start
Make sure you have your dashboard open - you'll need the Git credentials displayed there. This template includes Vue 3, Tailwind CSS 4, Pinia for state management, and Vue Router.

Quick Start

1

Create Repository from Template

On your dashboard, go to the Tools & Deployment tab. Click the "New Repository" button, select the Vue.js template from the dropdown, enter a repository name and subdomain, then click "Create Repository".

2

Clone Your Repository

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Install Dependencies

npm install
4

Start Development Server

npm run dev

Open http://localhost:4200 in your browser.

5

Build & Push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Every push to Git automatically deploys your application. Check your Module Work URL on the dashboard to see your live site.

Local Development with Docker

If you don't have Node.js installed locally, you can use Docker to run Vue commands. The project includes a Dockerfile for production builds with nginx.

What is Docker?
Docker creates isolated "containers" with all the software you need (Node.js, npm) without installing them on your computer. Think of it like a lightweight virtual machine.

Prerequisites

Install Docker Desktop for your operating system (Windows, Mac, or Linux).

Running Commands with Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Note
Docker is optional for local development. The NStrim platform handles deployment automatically - you only need Docker if you want to run commands locally without Node.js installed.

Project Structure

Understanding where files are located:

├── src/
│   ├── assets/               # Static assets (images, fonts)
│   ├── components/           # Vue components
│   ├── views/                # Page components
│   ├── router/               # Vue Router configuration
│   ├── stores/               # Pinia stores
│   ├── App.vue               # Root component
│   └── main.js               # Application entry point
├── public/                   # Public static files
├── index.html                # HTML entry point
├── vite.config.js            # Vite configuration
├── package.json              # Dependencies and scripts
└── Dockerfile                # Docker build configuration

Common Tasks

Creating a Component

Create .vue files in src/components/:

<!-- src/components/Button.vue -->
<script setup>
defineProps({
  label: String
});

const emit = defineEmits(['click']);
</script>

<template>
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

Adding a Route

Edit src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Using Pinia Store

Create a store in src/stores/:

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
});

Using Tailwind CSS

Tailwind CSS 4 is pre-configured. Use classes directly in your templates:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Useful Commands

npm run dev Start development server (port 4200)
npm run build Build for production
npm run preview Preview production build locally
npm run test:unit Run unit tests with Vitest
npm run lint Check and fix code style
npm run format Format code with Prettier

Troubleshooting

npm install fails with permission errors

Cause: Permission issues with npm cache or node_modules.

Solution: Delete node_modules folder and package-lock.json, then run npm install again.

Port 4200 already in use

Cause: Another process is using port 4200.

Solution: Use a different port: npm run dev -- --port 3000 or stop the other process.

Component not updating

Cause: Reactivity not properly set up.

Solution: Use ref() for primitives and reactive() for objects. Access ref values with .value in script, but not in template.

Router not working

Cause: RouterView not in App.vue or router not registered.

Solution: Ensure <RouterView /> is in App.vue and router is added with app.use(router) in main.js.

Build fails after deployment

Cause: Build errors or missing dependencies.

Solution: Run npm run build locally first to check for errors before pushing.

Deployment Workflow

Every time you push code to Git, your application is automatically built and deployed:

Code Change git push npm run build Deploy to nginx Live!

Your deployed application URL follows this format: 

https://<your-subdomain>-<repo-name>.<session-domain>

Example: https://student01-module-a.demo.nstrim.app

For more information, visit the official Vue.js Documentation.