feat: add daisyUI and NaiveUI

tymon42 · Feb 17, 2024 · 253237c · 253237c
1 parent 8fbfff3
commit 253237c
Show file tree

Hide file tree

Showing 8 changed files with 1,248 additions and 406 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,7 +3,7 @@
     "prettier.enable": false,
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.organizeImports": false
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "never"
     },
 }
diff --git a/app.vue b/app.vue
@@ -1,7 +1,33 @@
+<script setup lang="ts">
+import { Toaster } from 'vue-sonner'
+
+const colorMode = useColorMode()
+
+const themeString = computed(() => {
+  if (colorMode.preference === 'system')
+    return 'light'
+
+  return colorMode.preference === 'dark' ? 'dark' : 'light'
+})
+</script>
+
 <template>
-  <!-- <div> -->
-    <!-- <NuxtWelcome /> -->
-  <!-- </div> -->
-  <NuxtPage />
-  <UNotifications />
+  <NuxtLayout>
+    <NuxtPage />
+    <UNotifications class="z-50" />
+    <ClientOnly>
+      <Toaster class="z-50" position="top-left" :theme="themeString" rich-colors close-button :visible-toasts="5" />
+    </ClientOnly>
+  </NuxtLayout>
 </template>
+
+<style>
+body {
+  background-color: #fff;
+  color: #000;
+}
+.dark-mode body {
+  background-color: #000;
+  color: #fff;
+}
+</style>
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const toast: typeof import('vue-sonner')['toast']
+}
diff --git a/components.d.ts b/components.d.ts
@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,11 +1,43 @@
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
-  modules: ['@nuxthq/ui', '@nuxtjs/color-mode'],
+  build: {
+    // transpile: ['vue-sonner'],
+    transpile: process.env.NODE_ENV === 'production' ? ['vue-sonner', 'naive-ui', 'vueuc', '@css-render/vue3-ssr', 'juggle/resize-observer'] : ['vue-sonner', '@juggle/resize-observer'],
+  },
+  vite: {
+    optimizeDeps: {
+      include:
+        process.env.NODE_ENV === 'development'
+          ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
+          : [],
+      exclude: ['fsevents'],
+    },
+    plugins: [
+      AutoImport({
+        imports: [
+          {
+            'vue-sonner': ['toast'],
+          },
+        ],
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()],
+      }),
+    ],
+  },
+
+  modules: ['@nuxt/ui', '@vueuse/nuxt', '@nuxtjs/color-mode'],
   colorMode: {
     classSuffix: '',
+    preference: 'system', // default theme
+    dataValue: 'theme', // activate data-theme in <html> tag
   },
   css: ['~/assets/css/main.css'],
   postcss: {
@@ -16,12 +48,22 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      baseURL: process.env.BASE_URL || 'http://localhost:8888',
+      // baseURL: process.env.BASE_URL || 'http://localhost:8888',
+      // baseURL: 'http://localhost:8888',
+      baseURL: process.env.BASE_URL,
     },
   },
   routeRules: {
     '/api/v1/**': {
+      // proxy: { to: 'http://localhost:8888/api/v1/**' },
       proxy: { to: `${process.env.BASE_URL}/api/v1/**` },
     },
   },
+  app: {
+    head: {
+      meta: [
+        { name: 'referrer', content: 'no-referrer' },
+      ],
+    },
+  },
 })
diff --git a/package.json b/package.json
@@ -14,20 +14,24 @@
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@nuxt/devtools": "^0.5.5",
-    "@nuxthq/ui": "^2.7.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@types/node": "^20.5.4",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/nuxt": "^10.7.2",
     "autoprefixer": "^10.4.14",
     "commitizen": "^4.3.0",
     "cz-git": "^1.6.1",
+    "daisyui": "^4.7.2",
     "eslint": "^8.41.0",
     "lint-staged": "^13.2.2",
     "nuxt": "^3.5.1",
     "postcss": "^8.4.24",
     "postcss-custom-properties": "^13.2.0",
     "postcss-html": "^1.5.0",
     "tailwindcss": "^3.3.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0"
   },
   "lint-staged": {
     "*.{js,ts,tsx,jsx}": [
@@ -45,5 +49,11 @@
     "commitizen": {
       "path": "node_modules/cz-git"
     }
+  },
+  "dependencies": {
+    "@css-render/vue3-ssr": "^0.15.12",
+    "@nuxt/ui": "^2.13.0",
+    "naive-ui": "^2.37.3",
+    "vue-sonner": "^1.0.3"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,10 +8,17 @@ module.exports = {
     './nuxt.config.{js,ts}',
     './app.vue',
   ],
+  daisyui: {
+    // themes: true,
+    // darkTheme: 'dat', // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+  },
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('daisyui')],
   darkMode: 'class',
   exposeConfig: true,
 }