Guide to DevSecOps

Appearance

Guide: Setting Up a Vue 3 TypeScript Project with Vite ​

This guide will walk you through creating a Vue 3 project with TypeScript using Vite, and adding essential libraries like vue-router, axios, and Playwright for testing.

Creating a New Vite Project ​

  1. Create a new Vite project with Vue and TypeScript template
bash
npm create vite@latest my-project --template vue-ts
  1. Navigate to your project directory
bash
cd my-project
  1. Install dependencies
bash
npm install
  1. Start the development server
bash
npm run dev

Your application should now be running at http://localhost:5173/

bash
npm install vue-router

Adding Vue Router ​

  1. Install vue-router
bash
npm install vue-router
  1. Create a router configuration file
typescript
// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";
import About from "../pages/About.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/about",
      name: "About",
      component: About,
    },
  ],
});

export default router;
  1. Create page components in a pages directory
  2. Update your main app file to use the router:
typescript
// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");
  1. Update your App.vue to include router view:
vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

Install Tailwind with Vite ​

  1. Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

bash
npm install tailwindcss @tailwindcss/vite
  1. Configure the Vite plugin

Add the @tailwindcss/vite plugin to your Vite configuration. Edit your vite.config.ts file to include the plugin:

typescript
// vite.config.ts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [vue(), tailwindcss()],
});
  1. Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

css
/* src/styles.css */
@import "tailwindcss";
  1. Check your Tailwind CSS installation You can check if Tailwind CSS is working by adding some utility classes to your components. For example, in App.vue:
vue
<template>
  <div class="bg-gray-100 p-4">
    <h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const message = ref("Welcome to your Vue 3 + TypeScript + Tailwind CSS app!");
</script>
  1. Check build files for production, if you want to use Tailwind CSS in production, make sure to include the Tailwind CSS build step in your build process. You can do this by adding a script to your package.json:
json
{
  "scripts": {
    "build": "vite build && tailwindcss -o dist/tailwind.css"
  }
}

Adding Axios ​

  1. Install axios
bash
npm install axios
  1. Create an API service:
typescript
// src/services/api.ts
import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://your-api-endpoint.com",
  headers: {
    "Content-Type": "application/json",
  },
});

export default {
  // Define your API methods here
  getData() {
    return apiClient.get("/data");
  },
  postData(data: any) {
    return apiClient.post("/data", data);
  },
};
  1. Use the API service in your components:
vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import api from "../services/api";

const data = ref(null);
const loading = ref(false);
const error = ref("");

onMounted(async () => {
  try {
    loading.value = true;
    const response = await api.getData();
    data.value = response.data;
  } catch (err) {
    error.value = "Failed to load data";
    console.error(err);
  } finally {
    loading.value = false;
  }
});
</script>

Setting Up Playwright for Testing ​

  1. Install Playwright and initialize it
bash
npm install -D @playwright/test

npm init playwright@latest
  1. Install browser engines
bash

npx playwright install
  1. Create a Playwright configuration file
typescript
// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  timeout: 30000,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    baseURL: "http://localhost:5173",
    trace: "on-first-retry",
  },
  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"] },
    },
    {
      name: "webkit",
      use: { ...devices["Desktop Safari"] },
    },
  ],
  webServer: {
    command: "npm run dev",
    port: 5173,
    reuseExistingServer: !process.env.CI,
  },
});
  1. Create a test file
typescript
// tests/example.spec.ts
import { test, expect } from "@playwright/test";

test("homepage has correct title", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/My Vue App/);
});

test("navigation works", async ({ page }) => {
  await page.goto("/");
  await page.click("text=About");
  await expect(page).toHaveURL(/.*about/);
});
  1. Add a test script to your package.json
json
{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "test": "playwright test"
  }
}

OR

bash
npm install -D vitest jsdom @vitest/coverage-v8
  1. Run your tests
bash
npm run test

Building for Production ​

bash
npm run build

The built files will be in the dist directory, ready to be deployed to your production server.

Additional Resources ​