add basic nuxt boilerplate

Author: ejfine

template/.pre-commit-config.yaml

@@ -162,6 +162,34 @@ repos:
 
   # Linting
 
+  - repo: local
+    hooks:
+      - id: typescript-check
+        name: typescript-check
+        entry: bash -c "pnpm --dir frontend run type-check"
+        files: '.+\.ts$|.+\.vue$'
+        # don't pass filenames else the command line sees them twice
+        pass_filenames: false
+        language: system
+        # use require_serial so that script is only called once per commit
+        require_serial: true
+        # print the number of files as a sanity-check
+        verbose: true
+
+  - repo: local
+    hooks:
+      - id: eslint
+        name: eslint
+        entry: bash -c "pnpm --dir frontend run lint"
+        files: '.+\.ts$|.+\.vue$|.+\.js$'
+        # don't pass filenames else the command line sees them twice
+        pass_filenames: false
+        language: system
+        # use require_serial so that script is only called once per commit
+        require_serial: true
+        # print the number of files as a sanity-check
+        verbose: true
+
   - repo: https://github.com/Lucas-C/pre-commit-hooks-markup
     rev: 501f3d60cee13c712492103343bc23efdc7b3d1f #v1.0.1
     hooks:

template/frontend/app.config.ts

@@ -0,0 +1,11 @@
+export default defineAppConfig({
+  ui: {
+    primary: "sky",
+    gray: "cool",
+    tooltip: {
+      default: {
+        openDelay: 500,
+      },
+    },
+  },
+});

template/frontend/assets/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss" theme(static);
+@import "@nuxt/ui";

template/frontend/eslint.config.mjs

@@ -0,0 +1,34 @@
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt(
+  {
+    // Disallow <script lang="js"> in Vue files
+    files: ["**/*.vue"],
+    rules: {
+      "vue/block-lang": [
+        "error",
+        {
+          script: {
+            lang: "ts",
+          },
+        },
+      ],
+    },
+  },
+  {
+    // Disallow .js files in your source
+    files: ["**/*.js"],
+    ignores: [
+      // add exceptions here if you must allow certain .js files
+    ],
+    rules: {
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "Program",
+          message: "Use .ts instead of .js.",
+        },
+      ],
+    },
+  },
+);

template/frontend/global.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="nuxt/app" />
+// needed to help avoid typescript error in app.config.ts
+declare global {
+  const defineAppConfig: typeof import("nuxt/app").defineAppConfig;
+}
+
+export {};

template/frontend/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>

template/frontend/nuxt.config.ts

@@ -1,8 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import { defineNuxtConfig } from "nuxt/config";
 export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
   devtools: { enabled: true },
   modules: ["@nuxt/eslint", "@nuxt/test-utils", "@nuxt/ui"],
+  css: ["~/assets/css/main.css"],
   experimental: { appManifest: false }, // https://github.com/nuxt/nuxt/issues/30461#issuecomment-2572616714
   vite: {
     // this seems to be explicitly needed when in a devcontainer in order for hot reloading to work

template/frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.ts,.js",
+    "build": "pnpm run type-check && nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/ui": "3.0.0",
+    "nuxt": "^3.16.0",
+    "typescript": "^5.8.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.2.0",
+    "@nuxt/test-utils": "^3.17.2",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.22.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.14",
+    "vue-eslint-parser": "^10.1.1",
+    "vue-tsc": "^2.2.8",
+    "@nuxt/schema": "^3.0.0"
+  }
+}

template/frontend/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Hello World!</div>
+</template>

template/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["global.d.ts", "types/**/*.d.ts", "nuxt.config.ts", "app.config.ts"],
+  "exclude": ["node_modules", ".output", ".nuxt", "dist"]
+}