Extract nuxt module

[tobiasdiez]

Nuxt allows to bundle configuration changes and plugins into so-called modules: https://v3.nuxtjs.org/guide/going-further/modules/
Thus, instead of the manually work that is currently necessary, with a naive-ui nuxt module, one could simply have

// Installation: yarn add -D @nuxtjs/naive-ui

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/naive-ui',
  ]
})

The following is a first draft of such a module:

import { defineNuxtModule } from '@nuxt/kit'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineNuxtModule({
  setup(options, nuxt) {
    // Fix build issues
    if (nuxt.options.dev) {
      nuxt.options.build.transpile.push('@juggle/resize-observer')
      nuxt.options.vite.optimizeDeps?.include?.push(
        'naive-ui',
        'vueuc',
        'date-fns-tz/esm/formatInTimeZone'
      )
    } else {
      nuxt.options.build.transpile.push(
        'naive-ui',
        'vueuc',
        '@css-render/vue3-ssr',
        '@juggle/resize-observer'
      )
    }

    // Make sure the css is inserted last (for compatibility with tailwind)
    // This doesn't seem to work
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    nuxt.options.head.meta = [
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
      ...nuxt.options.head.meta,
      { name: 'naive-ui-style' },
    ]

    // Automatically register all components
    // This is a workaround as long as nuxt doesn't support component resolvers: https://github.com/nuxt/framework/issues/487
    nuxt.options.vite.plugins = nuxt.options.vite.plugins ?? []
    nuxt.options.vite.plugins.push(
      Components({
        resolvers: [NaiveUiResolver()],
        // This sadly doesn't work, one still needs to add "naive-ui/volar" in tsconfig.json
        dts: '.nuxt/naive-ui-components.d.ts',
      })
    )
  },
})

[productdevbook]

@tobiasdiez https://twitter.com/productdevbook/status/1571088085575954438

[tobiasdiez]

Thanks for your work, this looks nice! (By the way, it's good practice to mention the source if you copy & past code from somewhere).

@07akioni Do you prefer to have the nuxt module as part of the naive-ui repo, or do you prefer to move it to nuxt-community?

[productdevbook]

@tobiasdiez Thank you , I didn't quite understand what you mean. What do you mean by reference?

By the way, it's good practice to mention the source if you copy & past code from somewhere

if (nuxt.options.dev) {
      nuxt.options.build.transpile.push('@juggle/resize-observer')
      nuxt.options.vite.optimizeDeps?.include?.push(
        'naive-ui',
        'vueuc',
        'date-fns-tz/esm/formatInTimeZone'
      )
    } else {
      nuxt.options.build.transpile.push(
        'naive-ui',
        'vueuc',
        '@css-render/vue3-ssr',
        '@juggle/resize-observer'
      )
    }

We have been using this structure for a long time, but I copied this part because I saw your message here. Do I need to include the link of this code and the message here as a reference?

this is okay ?

[07akioni]

Thanks for your work, this looks nice! (By the way, it's good practice to mention the source if you copy & past code from somewhere).

@07akioni Do you prefer to have the nuxt module as part of the naive-ui repo, or do you prefer to move it to nuxt-community?

I think make it inside naive-ui repo is a better choice.

[kaikaibenkai]

+1 any progress?

---

okay, I've seen naive-ui-nuxt