Vue 3 Template

Requirements

• Node.js 22.22.x
• PNPM 10.28.x

Stack

• PNPM
• Turborepo
• Vite
• Vue
• Histoire
• Vitest

Scripts

• pnpm i — Install dependencies
• pnpm dev — Running apps (http://localhost:5173) and Histoire (http://localhost:6006)
• pnpm build — Building apps and packages
• pnpm test — Runnning tests once
• pnpm test:unit — Running unit tests
• pnpm test:unit-ui — Running unit tests with UI
• pnpm lint — Check the linting
• pnpm lint:fix — Linting and fixing

Publish packages to NPM

Add the code below to .github/workflows/ci.yaml and add NPM_TOKEN to the GitHub repository secrets.

- name: Publish packages to NPM
  shell: bash
  run: |
    echo "//registry.npmjs.org/:_authToken="${{ secrets.NPM_TOKEN }}"" > ~/.npmrc
    pnpm -r --filter=./packages/* publish --access public --provenance

and create a configuration for vite.config.ts

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [dts()],
  build: {
    target: 'esnext',
    sourcemap: true,
    minify: false,
    emptyOutDir: false,
    lib: {
      entry: './src/index.ts',
      name: 'utils',
      fileName: 'index',
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        exports: 'named',
      },
    },
  },
})

and you will need to specify the export in the package.json file

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    }
  },
  "files": [
    "dist"
  ]
}