chore: Update dependencies (#2)

mariusheine · web-flow · commit 9faa7b37f00d · 2025-04-07T13:50:37.000+02:00
* update dependencies and add package manager

* fix typecheck errors

* remove pnpm version from github actions

* perform  nuxt ui migration

* resolve terminal warning

* add deployment on github pages

* fix linter

* fix deployment

* properly deploy to github pages

* only deploy on main branch

* fix job name

* enable gitpod

* use correct node version
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,46 @@
+name: Deploy
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - uses: pnpm/action-setup@v4
+        with:
+          run_install: true
+      - run: pnpm build --preset github_pages
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+  deploy:
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    needs: build
+
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
@@ -13,7 +13,6 @@ jobs:
           node-version: 22
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: true
       - run: pnpm lint
 
@@ -27,12 +26,11 @@ jobs:
           node-version: 22
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: true
       - run: pnpm typecheck
 
   spelling:
-    name: Typecheck
+    name: Spelling
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -41,6 +39,5 @@ jobs:
           node-version: 22
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: true
       - run: pnpm spelling
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@
 .nitro
 .cache
 dist
+*.tsbuildinfo
 
 # Node dependencies
 node_modules
@@ -14,6 +15,7 @@ logs
 *.log
 
 # Misc
+.pnpm-store
 .DS_Store
 .fleet
 .idea
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -44,6 +44,10 @@
   "editor.quickSuggestions": {
     "strings": true
   },
+  "tailwindCSS.classAttributes": ["class", "ui"],
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
   "i18n-ally.localesPaths": [
     "i18n",
     "i18n/locales"
diff --git a/README.md b/README.md
@@ -13,3 +13,7 @@ It uses `pnpm` as package manager.
 `SSR` is deactivated.
 
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Development
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/geprog/nuxt-template)
diff --git a/app.vue b/app.vue
@@ -1,8 +1,10 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-    <UNotifications />
-  </NuxtLayout>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+      <UNotifications />
+    </NuxtLayout>
+  </UApp>
 </template>
 
 <script setup lang="ts">
@@ -13,7 +15,7 @@ onErrorCaptured((error) => {
   toast.add({
     title: t('error_occurred'),
     description: error.message,
-    color: 'red',
+    color: 'error',
   });
 });
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
diff --git a/gitpod.yml b/gitpod.yml
@@ -0,0 +1,13 @@
+image: gitpod/workspace-full-vnc:latest
+
+tasks:
+  - name: Prepare node version
+    before: |
+      nvm install 22
+      nvm use 22
+      corepack install
+      corepack enable pnpm
+      pnpm install
+      nvm alias default 22
+      echo "nvm use default &>/dev/null" >> ~/.bashrc.d/51-nvm-fix
+    command: pnpm dev
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
@@ -1,3 +1,4 @@
 {
-  "start_page": "Startseite"
+  "start_page": "Startseite",
+  "other_page": "Andere Seite"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -1,3 +1,4 @@
 {
-  "start_page": "Start page"
+  "start_page": "Start page",
+  "other_page": "Other page"
 }
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="flex h-lvh flex-col">
-    <UHorizontalNavigation :links="menuLinks" :ui="{ wrapper: 'border' }" />
-    <main class="mx-auto mb-20 flex h-full w-full max-w-6xl flex-col p-2 py-4 sm:py-6 lg:py-8">
+    <UNavigationMenu :items class="w-full" />
+    <main class="mx-auto mb-20 flex items-center h-full w-full max-w-6xl flex-col p-2 py-4 sm:py-6 lg:py-8">
       <slot />
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
-const path = computed(() => route.path);
+import type { NavigationMenuItem } from '@nuxt/ui';
 
 const { t } = useI18n();
 
-const menuLinks = computed(() => [
+const items = computed<NavigationMenuItem[]>(() => [
   [
     {
       label: t('start_page'),
       to: '/',
-      active: path.value === '/',
+    },
+    {
+      label: t('other_page'),
+      to: '/other',
     },
   ],
 ]);
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,10 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import process from 'node:process';
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-01-27',
   devtools: { enabled: true },
   telemetry: false,
   ssr: false,
   modules: ['@nuxt/ui', '@nuxtjs/i18n'],
+  css: ['~/assets/css/main.css'],
   app: {
     head: {
       title: 'Nuxt Template',
@@ -13,6 +16,11 @@ export default defineNuxtConfig({
       viewport: 'width=device-width, initial-scale=1',
     },
   },
+  vite: {
+    server: {
+      allowedHosts: process.env.GITPOD_WORKSPACE_CLUSTER_HOST ? [`3000-${process.env.HOSTNAME}.${process.env.GITPOD_WORKSPACE_CLUSTER_HOST}`] : undefined,
+    },
+  },
   typescript: {
     strict: true,
   },
@@ -23,5 +31,8 @@ export default defineNuxtConfig({
     ],
     strategy: 'no_prefix',
     defaultLocale: 'en',
+    bundle: {
+      optimizeTranslationDirective: false, // recommend to disable. see https://github.com/nuxt-modules/i18n/issues/3238#issuecomment-2672492536
+    },
   },
 });
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "nuxt-template",
   "type": "module",
   "private": true,
+  "packageManager": "pnpm@10.7.1",
   "engines": {
     "pnpm": ">=9.0.0",
     "node": ">=22.0.0"
@@ -11,22 +12,22 @@
     "dev": "nuxt dev",
     "lint": "eslint",
     "spelling": "cspell lint --no-progress '**'",
-    "typecheck": "vue-tsc --build --force",
-    "generate": "nuxt generate",
+    "typecheck": "nuxt typecheck",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/ui": "2.21.0",
-    "@nuxtjs/i18n": "9.1.3",
-    "nuxt": "3.15.3"
+    "@nuxt/ui": "3.0.2",
+    "@nuxtjs/i18n": "9.5.2",
+    "nuxt": "3.16.2",
+    "tailwindcss": "4.1.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "4.1.0",
+    "@antfu/eslint-config": "4.11.0",
     "@cspell/dict-de-de": "4.0.3",
-    "cspell": "8.17.2",
-    "eslint": "9.19.0",
+    "cspell": "8.18.1",
+    "eslint": "9.24.0",
     "eslint-plugin-format": "1.0.1",
-    "vue-tsc": "2.1.10"
+    "vue-tsc": "2.2.2"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <USkeleton class="w-1/2 h-1/2" />
+</template>
diff --git a/pages/other.vue b/pages/other.vue
@@ -0,0 +1,3 @@
+<template>
+  <USkeleton class="w-1/2 h-1/2" />
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import 'tailwindcss';`
	`2`	`+@import '@nuxt/ui';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "start_page": "Startseite"`
	`2`	`+ "start_page": "Startseite",`
	`3`	`+ "other_page": "Andere Seite"`
`3`	`4`	`}`