[nuxt 3] (XI) transmission & module

“ You people here , Five thousand roses were planted in one garden , But I can't find what I'm looking for .” ———— 《 The little prince 》

delivery

Vue 3 Built in <Teleport> Components Allow component content to be rendered to Vue Any external DOM On .

<teleport> Of to attribute , Receive one CSS Selectors , Or a real DOM node .Nuxt at present SSR Some support eating Transferred to the body, The client is going to use <ClientOnly> Support rendering to other targets after wrapping .

Example : body teleport

<template>
  <button @click="open = true">
    Open Modal
  </button>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">
        Close
      </button>
    </div>
  </Teleport>
</template>

Example : client-side teleport

  <ClientOnly>
    <Teleport to="#some-selector">
      <!-- content -->
    </Teleport>
  </ClientOnly>
</template>

modular

Nuxt A module system is provided to extend the core of the framework and simplify the integration . For existing modules , You need to redevelop or maintain scaffolding , You can nuxt.config Add the module you want to use .

Explore Nuxt modular

When using Nuxt When developing production level applications , You may find that the core functions of the framework are not enough .Nuxt It can be extended through configuration options and plug-ins , But maintaining these configurations in multiple projects can be cumbersome , And repeat . On the other hand , The need to support each project out of the box will make Nuxt Become very complex and difficult to use .

This is a Nuxt One reason to provide a modular system to expand core functions .Nuxt Modules are asynchronous functions , In execution nuxi dev or nuxi build They will execute in sequence . They can replace templates , To configure webpackde loaders , add to CSS library , And perform many other useful tasks .

The best thing is ,Nuxt Modules can be accessed through npm Package management , This allows them to be reused across projects and shared with the community , Help create a high-quality add-on ecosystem .

Extended reading ^[1]

modules attribute

After installing the module , You can add them to nuxt.config.ts In the document modules Properties of the . The developer of the module usually provides additional operation steps and usage details .

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example',

    // Load a local module
    './modules/example',

    // Add module with inline-options
    ['./modules/example', { token: '123' }]

    // Inline module definition
    async (inlineOptions, nuxt) => { }
  ]
})

Nuxt Modules are now available only at build time ,Nuxt2 in buildModules Attributes are modules To replace the .

Module development

Everyone can develop modules , stay Module development guidelines Read more about development modules .

Reference material

[1]

Nuxt 3 Compatible Modules: https://modules.nuxtjs.org/?version=3.x"