Merge pull request #7 from terwer/dev

feat:#1 Element-Plus ssr

app.vue

@@ -2,4 +2,14 @@
   <NuxtLayout>
     <NuxtPage/>
   </NuxtLayout>
-</template>
+</template>
+
+<script lang="ts" setup>
+import {ID_INJECTION_KEY} from 'element-plus'
+import {provide} from "vue";
+
+provide(ID_INJECTION_KEY, {
+  prefix: 100,
+  current: 0,
+})
+</script>

assets/scss/index.scss

@@ -0,0 +1,16 @@
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+
+a {
+  font-weight: 400;
+  color: var(--el-color-primary);
+}

components/Counter.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-input-number v-model="count" :min="1" :max="10"/>
+</template>
+
+<script lang="ts" setup>
+import {ElInputNumber} from "element-plus";
+import {useCount} from "~/composables/count";
+
+const {count} = useCount();
+</script>
+
+<script lang="ts">
+export default {
+  name: "Counter"
+}
+</script>
+
+<style scoped>
+
+</style>

components/Examples.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-button class="m-4" @click="hello">Hello</el-button>
+  <el-button class="m-4" type="primary" @click="hello">Hello</el-button>
+  <el-button class="m-4" type="success" @click="helloSuccess">Hello</el-button>
+
+  <br />
+
+  <Counter class="m-4" />
+
+  <br />
+
+  <el-icon class="cursor-pointer">
+    <Grape />
+  </el-icon>
+  <el-icon class="cursor-pointer">
+    <IceCream />
+  </el-icon>
+  <el-icon class="cursor-pointer mb-4">
+    <IceDrink />
+  </el-icon>
+
+  <br />
+
+  <client-only>
+    <el-config-provider :locale="zhCn">
+      <el-date-picker
+          v-model="timeValue"
+          type="date"
+          placeholder="请选择日期"
+      ></el-date-picker>
+    </el-config-provider>
+  </client-only>
+</template>
+
+<script lang="ts" setup>
+import {
+  ElIcon,
+  ElButton,
+  ElConfigProvider,
+  ElDatePicker,
+  ElMessage,
+} from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import { Grape, IceCream, IceDrink } from "@element-plus/icons-vue";
+import {ref} from "vue";
+
+const timeValue = ref("");
+const hello = () => ElMessage.info("hello world");
+const helloSuccess = () => ElMessage.success("hello world");
+</script>
+
+<script lang="ts">
+export default {
+  name: "Examples"
+}
+</script>
+
+<style scoped>
+
+</style>

Components/default/Header.vue → components/default/Header.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import Navbar from "~/Components/default/Navbar.vue";
+import Navbar from "~/components/default/Navbar.vue";
 
 export default {
   name: "Header",

components/default/Navbar.vue

@@ -0,0 +1,19 @@
+<template>
+  <Examples/>
+</template>
+
+<script lang="ts" setup>
+import Examples from "~/components/Examples.vue";
+
+</script>
+
+<script lang="ts">
+
+export default {
+  name: "Navbar",
+}
+</script>
+
+<style scoped>
+
+</style>

composables/count.ts

@@ -0,0 +1,16 @@
+export function useCount() {
+    const count = useState('count', () => Math.round(Math.random() * 20))
+
+    function inc() {
+        count.value += 1
+    }
+    function dec() {
+        count.value -= 1
+    }
+
+    return {
+        count,
+        inc,
+        dec,
+    }
+}

layouts/default.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import Header from "../Components/default/Header";
+import Header from "../components/default/Header";
 export default {
   components: {Header}
 }

nuxt.config.ts

@@ -1,16 +1,66 @@
 import {defineNuxtConfig} from 'nuxt'
+import ElementPlus from 'unplugin-element-plus/vite'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+    // meta
+    meta: {
+        title: 'Element Plus + Nuxt 3',
+        meta: [
+            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+            {
+                hid: 'description',
+                name: 'description',
+                content: 'ElementPlus + Nuxt3',
+            },
+        ],
+        link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}],
+    },
+
     nitro: {
         preset: "vercel",
     },
+
+    // css
+    css: ['~/assets/scss/index.scss'],
+
+    // build
+    build: {
+        transpile: ['element-plus/es'],
+    },
+
     typescript: {
-        strict: true
+        strict: true,
+        shim: false,
     },
+
     static: {
         prefix: false
     },
+
+    vite: {
+        plugins: [ElementPlus()],
+    },
+
+    // build modules
+    modules: ['@vueuse/nuxt', '@unocss/nuxt', '@pinia/nuxt'],
+
+    // auto import components
+    components: true,
+
+    // vueuse
+    vueuse: {
+        ssrHandlers: true,
+    },
+
+    unocss: {
+        uno: true,
+        attributify: true,
+        icons: {
+            scale: 1.2,
+        },
+    },
+
     publicRuntimeConfig: {
         SIYUAN_API_URL: process.env.SIYUAN_API_URL,
         SIYUAN_AUTH_TOKEN: process.env.SIYUAN_AUTH_TOKEN,

package.json

@@ -1,22 +1,32 @@
 {
   "private": true,
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "preview": "nuxi preview",
+    "start": "node .output/server/index.mjs",
+    "generate": "nuxi generate",
     "vdev": "vercel dev --listen 3000"
   },
   "devDependencies": {
+    "@pinia/nuxt": "^0.4.2",
     "@types/showdown": "^2.0.0",
     "@types/xmlrpc": "^1.3.7",
-    "nuxt": "3.0.0-rc.8"
+    "@unocss/nuxt": "^0.45.23",
+    "@vueuse/nuxt": "^9.3.0",
+    "nuxt": "3.0.0-rc.8",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.3",
+    "unplugin-element-plus": "^0.4.1",
+    "vite": "^3.1.3"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
     "arraybuffer-xml-parser": "^0.6.0",
     "element-plus": "^2.2.15",
+    "pinia": "^2.0.22",
     "showdown": "^2.1.0",
+    "vue": "^3.2.39",
     "xmlrpc": "^1.3.2"
   }
 }

pages/ChangeTheme.vue

@@ -8,7 +8,7 @@
 const route = useRoute()
 
 function enableCustomLayout() {
-  route.meta.layout = "custom"
+  route.meta.layout = "default"
 }
 
 definePageMeta({

pages/index.vue

@@ -21,7 +21,7 @@ useHead({
 
 <script lang="ts">
 
-import HomePostList from "~/Components/default/HomePostList.vue";
+import HomePostList from "~/components/default/HomePostList.vue";
 
 export default {
   name: "index",

stores/user.ts

@@ -0,0 +1,35 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+
+export const useUserStore = defineStore("user", () => {
+    /**
+     * Current named of the user.
+     */
+    const savedName = ref("");
+    const previousNames = ref(new Set<string>());
+
+    const usedNames = computed(() => Array.from(previousNames.value));
+    const otherNames = computed(() =>
+        usedNames.value.filter((name) => name !== savedName.value)
+    );
+
+    /**
+     * Changes the current name of the user and saves the one that was used
+     * before.
+     *
+     * @param name - new name to set
+     */
+    function setNewName(name: string) {
+        if (savedName.value) previousNames.value.add(savedName.value);
+
+        savedName.value = name;
+    }
+
+    return {
+        setNewName,
+        otherNames,
+        savedName,
+    };
+});
+
+if (import.meta.hot)
+    import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));