doc(aliases): change #app to #imports in snippets

nuxt · pi0 · Feb 18, 2022 · Feb 17, 2022 · Feb 18, 2022 · Feb 18, 2022
commit 3f25fda9cac56d3cb0315740d1872ff832927213
diff --git a/docs/content/1.getting-started/3.bridge.md b/docs/content/1.getting-started/3.bridge.md
@@ -136,7 +136,7 @@ You may also need to add `@vue/runtime-dom` as a devDependency if you are strugg
 ::
 ::alert
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
-Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead Typescript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#app` not being recognized.
+Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead Typescript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
 
 In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the `alias` property withing your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::
@@ -184,7 +184,7 @@ You can now migrate to the Nuxt 3 plugins API, which is slightly different in fo
 Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/directory-structure/plugins).
 
 ```js
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.provide('injected', () => 'my injected function')
@@ -202,7 +202,7 @@ Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useM
 
 ```vue
 <script setup>
-import { useMeta } from '#app'
+import { useMeta } from '#imports'
 useMeta({
   title: 'My Nuxt App',
 })

diff --git a/docs/content/1.getting-started/4.bridge-composition-api.md b/docs/content/1.getting-started/4.bridge-composition-api.md
@@ -96,7 +96,7 @@ This function has been removed, but its use cases can be met by using `useNuxtAp
 
 ```diff
 - import { onGlobalSetup } from '@nuxtjs/composition-api'
-+ import { defineNuxtPlugin } from '#app'
++ import { defineNuxtPlugin } from '#imports'
 
 - export default () => {
 -   onGlobalSetup(() => {
@@ -116,7 +116,7 @@ The key differences are that you must provide a _key_ for this state (which prev
 
 ```diff
 - import { ssrRef } from '@nuxtjs/composition-api'
-+ import { useState } from '#app'
++ import { useState } from '#imports'
 
 - const ref1 = ssrRef('initialData')
 - const ref2 = ssrRef(() => 'factory function')
@@ -157,13 +157,13 @@ In order to access Vuex store instance, you can use `useNuxtApp().$store`.
 
 ```diff
 - import { useStore } from '@nuxtjs/composition-api`
-+ import { useNuxtApp } from '#app'
++ import { useNuxtApp } from '#imports'
 + const { $store } = useNuxtApp()
 ```
 
 ```vue
 <script>
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#imports'
 const { $store } = useNuxtApp()
 </script>
 ```
@@ -174,13 +174,13 @@ You can access injected helpers using `useNuxtApp`.
 
 ```diff
 - import { useContext } from '@nuxtjs/composition-api`
-+ import { useNuxtApp } from '#app'
++ import { useNuxtApp } from '#imports'
 + const { $axios } = useNuxtApp()
 ```
 
 ```vue
 <script>
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#imports'
 const { $axios } = useNuxtApp()
 </script>
 ```
@@ -213,7 +213,7 @@ Migrating to the new composables from `useAsync`:
 ```diff
 <script setup>
 - import { useAsync } from '@nuxtjs/composition-api'
-+ import { useLazyAsyncData, useLazyFetch } from '#app'
++ import { useLazyAsyncData, useLazyFetch } from '#imports'
 - const posts = useAsync(() => $fetch('/api/posts'))
 + const { data: posts } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
 + // or, more simply!
@@ -226,7 +226,7 @@ Migrating to the new composables from `useFetch`:
 ```diff
 <script setup>
 - import { useFetch } from '@nuxtjs/composition-api'
-+ import { useLazyAsyncData, useLazyFetch } from '#app'
++ import { useLazyAsyncData, useLazyFetch } from '#imports'
 - const posts = ref([])
 - const { fetch } = useFetch(() => { posts.value = await $fetch('/api/posts') })
 + const { data: posts, refresh } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
@@ -246,7 +246,7 @@ In order to interact with `vue-meta`, you may use `useNuxt2Meta`, which will wor
 ```diff
 <script setup>
 - import { useMeta } from '@nuxtjs/composition-api'
-+ import { useNuxt2Meta } from '#app'
++ import { useNuxt2Meta } from '#imports'
   useNuxt2Meta({
     title: 'My Nuxt App',
   })
@@ -257,7 +257,7 @@ You can also pass in computed values or refs, and the meta values will be update
 
 ```ts
 <script setup>
-import { useNuxt2Meta } from '#app'
+import { useNuxt2Meta } from '#imports'
 const title = ref('my title')
 useNuxt2Meta({
   title,
@@ -275,7 +275,7 @@ Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be ac
 ```diff
 <script setup>
 - import { useMeta } from '@nuxtjs/composition-api'
-+ import { useMeta } from '#app'
++ import { useMeta } from '#imports'
   useMeta({
     title: 'My Nuxt App',
   })

diff --git a/docs/content/2.concepts/5.typescript.md b/docs/content/2.concepts/5.typescript.md
@@ -31,7 +31,7 @@ Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for
 ::
 ::alert
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
-Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead Typescript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#app` not being recognized.
+Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead Typescript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
 
 In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the `alias` property within your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::

diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/3.docs/1.usage/3.meta-tags.md
@@ -9,6 +9,8 @@ Within your `setup` function, you can call `useMeta` with an object of meta prop
 For example:
 
 ```js
+import { useMeta } from '#imports'
+
 export default {
   setup () {
     useMeta({

diff --git a/docs/content/3.docs/1.usage/4.nuxt-app.md b/docs/content/3.docs/1.usage/4.nuxt-app.md
@@ -9,7 +9,7 @@ In Nuxt 2, this was referred to as [Nuxt context](https://nuxtjs.org/docs/intern
 Within composables, plugins and components you can access `nuxtApp` with `useNuxtApp`:
 
 ```js
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#imports'
 
 function useMyComposable () {
   const nuxtApp = useNuxtApp()

diff --git a/docs/content/3.docs/1.usage/5.runtime-config.md b/docs/content/3.docs/1.usage/5.runtime-config.md
@@ -84,6 +84,8 @@ If you want to use the runtime confg within any (custom) plugin, you can use `us
 For example:
 
 ```ts
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
+
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig();
 

diff --git a/docs/content/3.docs/1.usage/6.cookies.md b/docs/content/3.docs/1.usage/6.cookies.md
@@ -39,6 +39,8 @@ The example below creates a cookie called `counter`. If the cookie doesn't exist
 </template>
 
 <script setup>
+import { useCookie } from '#imports'
+
 const counter = useCookie('counter')
 counter.value = counter.value || Math.round(Math.random() * 1000)
 </script>

diff --git a/docs/content/3.docs/2.directory-structure/11.plugins.md b/docs/content/3.docs/2.directory-structure/11.plugins.md
@@ -34,7 +34,7 @@ Only `myPlugin.ts` and `myOtherPlugin/index.ts` would be registered.
 The only argument passed to a plugin is [`nuxtApp`](/docs/usage/nuxt-app).
 
 ```ts
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(nuxtApp => {
   // Doing something with nuxtApp
@@ -46,7 +46,7 @@ export default defineNuxtPlugin(nuxtApp => {
 If you would like to provide a helper on the `NuxtApp` instance, just return it from the plugin under a `provide` key. For example:
 
 ```ts
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(() => {
   return {
@@ -115,7 +115,7 @@ yarn add --dev vue-gtag-next
 Then create a plugin file `plugins/vue-gtag.client.js`.
 
 ```ts
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 import VueGtag from 'vue-gtag-next'
 
 export default defineNuxtPlugin((nuxtApp) => {

diff --git a/docs/content/3.docs/2.directory-structure/5.composables.md b/docs/content/3.docs/2.directory-structure/5.composables.md
@@ -27,7 +27,7 @@ Only `useFoo.ts` and `useBar/index.ts` would be searched for imports - and if th
 ## Example: (using named export)
 
 ```js [composables/useFoo.ts]
-import { useState } from '#app'
+import { useState } from '#imports'
 
 export const useFoo = () => {
   return useState('foo', () => 'bar')
@@ -37,7 +37,7 @@ export const useFoo = () => {
 ## Example: (using default export)
 
 ```js [composables/use-foo.ts or composables/useFoo.ts]
-import { useState } from '#app'
+import { useState } from '#imports'
 
 // It will be available as useFoo() (camelCase of file name without extension)
 export default function () {

diff --git a/docs/content/3.docs/2.directory-structure/6.layouts.md b/docs/content/3.docs/2.directory-structure/6.layouts.md
@@ -77,6 +77,8 @@ You can also use a ref or computed property for your layout.
 </template>
 
 <script setup>
+import { useRoute } from '#imports';
+
 const route = useRoute()
 function enableCustomLayout () {
   route.meta.layout = "custom"

diff --git a/docs/content/3.docs/2.directory-structure/7.middleware.md b/docs/content/3.docs/2.directory-structure/7.middleware.md
@@ -54,6 +54,8 @@ It is advised to use the helper functions above for performing redirects or stop
 It is possible to add global or named route middleware manually using the `addRouteMiddleware()` helper function, such as from within a plugin.
 
 ```ts
+import { defineNuxtPlugin  } from '#imports';
+
 export default defineNuxtPlugin(() => {
   addRouteMiddleware('global-test', () => {
     console.log('this global middleware was added in a plugin and will be run on every route change')

diff --git a/docs/content/3.docs/4.advanced/2.modules.md b/docs/content/3.docs/4.advanced/2.modules.md
@@ -72,6 +72,8 @@ export default defineNuxtConfig({
 Creating Nuxt modules involves tedious and common tasks. [Nuxt Kit](/docs/advanced/kit), provides a convenient and standard API to define Nuxt modules using `defineNuxtModule`:
 
 ```js
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   meta: {
     // Usually  npm package name of your module
@@ -190,6 +192,8 @@ export default defineNuxtModule<ModuleOptions>({
 If your module will provide a CSS library, make sure to check if the user already included the library to avoid duplicates and add an option to disable the CSS library in the module.
 
 ```ts
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.options.css.push('font-awesome/css/font-awesome.css')
@@ -202,6 +206,8 @@ export default defineNuxtModule({
 If your module opens handles or starts a watcher, we should close it when the nuxt lifecycle is done. For this, we can use the `close` hook:
 
 ```ts
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.hook('close', async nuxt => {