[nuxt 3] (XII) project directory structure 3

If a person has a friend , Even if you are dying , It's worth it . I'm so happy , There was a fox friend ... ——《 The little prince 》

Plug-in directory

Nuxt Will automatically read and load plugins/ Documents in . You can add .server or .client Suffixed file names allow plug-ins to execute only on the server or client .

plugins/ All plug-ins in the directory will be registered automatically , So you don't need to be alone nuxt.config Add .

Which files will be registered

Only plugins/ Top level file （ Or in the subdirectory index file ） Will be registered as a plug-in .

Example :

plugins
 | - myPlugin.ts
 | - myOtherPlugin
 | --- supportingFile.ts
 | --- componentToRegister.vue
 | --- index.ts

Only myPlugin.ts and myOtherPlugin/index.ts Will be registered .

Creating plug-ins

Plug in only receives nuxtApp) Parameters .

export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

Automatic auxiliary function

If you want to NuxtApp Example provides an auxiliary function , In the return object provide Add functions to . for example ：

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

How to use it in other documents ：

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

Plug in type

If you return a custom auxiliary function from the plug-in , They will automatically type derivation , You will find that they will come from usenuxtApp() Return is automatic dynamic type derivation , It can also be used in the template .

If you need to use auxiliary functions inside another plug-in , You can call useNuxtApp() To get the type version , But in general , Unless you determine the calling order of the plug-in , Otherwise, this situation should be avoided .

Advanced

For advanced use cases , You can declare the type of the injected attribute like this ：

declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

Vue plug-in unit

If you want to use Vue plug-in unit , for example vue-gtag, To add GOOgle Statistics , label , You can use Nuxt Plug in .

There is one Open source RFC Make it easier to realize this function nuxt/framework#1175

First install the plug-in you want .

yarn add --dev vue-gtag-next

Create a name that is plugins/vue-gtag.client.js Plug in for

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
})

Vue Instructions

Similarly , You can register a customized Vue Instructions , for example ： stay plugins/directive.ts in

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
      el.focus()
    },
    getSSRProps (binding, vnode) {
      // you can provide SSR-specific props here
      return {}
    }
  })
})

App file

app.vue File is Nuxt 3 The main components of the application .

Basic usage

stay Nuxt 3 in ,pages/ The directory is optional . If it doesn't exist pages/ non-existent ,Nuxtt It won't introduce vue-router rely on , It is very useful when an application or landing page does not need route navigation . With Nuxt 3, the pages/ directory is optional. If not present,

<template>
  <h1>Hello World!</h1>
</template>

Use with pages

If you use pages/ Catalog , Need to use <NuxtPage> To show the page :

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

because Nuxt3 stay <NuxtPage> Internal use Suspense, We recommend wrapping it with a unique root element .

remember app.vue yes Nuxt The main components of the application , Any code you add to it （JS and CSS） Will be included in every page .