refactor: migrate nuxt 4 app folder

Author: YunYouJun

.vscode/settings.json

@@ -5,5 +5,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine as build-stage
+
+WORKDIR /app
+RUN corepack enable
+
+COPY .npmrc package.json pnpm-lock.yaml ./
+RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store \
+    pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+# SSR
+FROM node:20-alpine as production-stage
+
+WORKDIR /app
+
+COPY --from=build-stage /app/.output ./.output
+
+EXPOSE 3000
+
+CMD ["node", ".output/server/index.mjs"]

README.md

@@ -1,15 +1,12 @@
 # Element Plus with Nuxt 3 Minimal Starter
 
-<pre align="center">
-🏗 Working in Progress
-</pre>
-
-SSR Preview: <https://element-plus-nuxt.vercel.app/>
-
-SSG Preview: <https://nuxt-starter.element-plus.org/>
+- SSR Preview: <https://element-plus-nuxt.vercel.app/>
+- SSG Preview: <https://nuxt-starter.element-plus.org/>
 
 We recommend to look at the [Nuxt 3 Docs](https://nuxt.com/) and [Element Plus Docs](https://element-plus.org/).
 
+> If you are looking for a Vite + Vue + Element Plus starter, check out [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter/).
+
 ## Setup
 
 Make sure to install the dependencies

app.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { appName } from '~/constants'
+
+useHead({
+  title: appName,
+})
+</script>
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

app/app.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+useHead({
+  meta: [{
+    id: 'theme-color',
+    name: 'theme-color',
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
+  }],
+})
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="inline-flex justify-center items-center" @click="toggleDark">
+    <div class="i-ri-sun-line dark:i-ri-moon-line" />
+  </button>
+</template>

assets/scss/element/dark.scss renamed to app/assets/scss/element/dark.scss

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { repository } from "~/../package.json";
+</script>
+
+<template>
+  <a class="inline-flex justify-center items-center dark:text-white" :href="repository.url" target="_blank">
+    <div i-ri-github-line />
+  </a>
+</template>