mirror of https://github.com/nuxt/nuxt.git
docs(examples): normalize examples using tips (#3852)
This commit is contained in:
Clément Ollivier
GitHub
parent
e16998126d
commit
797da68979
|
|
@ -5,7 +5,7 @@ const bar = getBar()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="config-extends">
|
||||
<NuxtExampleLayout show-tips example="config-extends">
|
||||
theme runtimeConfig
|
||||
<pre>{{ JSON.stringify(themeConfig, null, 2) }}</pre>
|
||||
<BaseButton>Base Button</BaseButton>
|
||||
|
|
@ -15,6 +15,11 @@ const bar = getBar()
|
|||
{{ foo }} {{ bar }}
|
||||
<br>
|
||||
{{ $myPlugin() }}
|
||||
<template #tips>
|
||||
<p>
|
||||
This example shows how to use the <code>extends</code> key in <code>nuxt.config.ts</code> to use the <code>base/</code> directory as a base Nuxt application, and use its components, composable or config and override them if necessary.
|
||||
</p>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout :show-tips="true" example="locale">
|
||||
<NuxtExampleLayout show-tips example="locale">
|
||||
<h1 class="text-xl opacity-50">
|
||||
Nuxt birthday
|
||||
</h1>
|
||||
|
|
@ -22,9 +22,12 @@ const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
|
|||
</select>
|
||||
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>
|
||||
This example shows how to define a locale composable to handle the application's locale, both server and client-side.
|
||||
</p>
|
||||
<p>
|
||||
You can right click to "View Page Source" and see that Nuxt renders the correct date in SSR based on visitor's locale.
|
||||
</div>
|
||||
</p>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<NuxtExampleLayout example="module-extend-pages">
|
||||
<NuxtExampleLayout show-tips example="module-extend-pages">
|
||||
<slot />
|
||||
<template #tips>
|
||||
<p>
|
||||
This example defines a new <code>test</code> page using <code>extendPages</code> within a module.
|
||||
</p>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
Test page added by module
|
||||
<p>
|
||||
Go to <NuxtLink to="/">
|
||||
Homepage
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>Test page added by module</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<NuxtExampleLayout :show-tips="true" example="nuxt-link" class="example">
|
||||
<NuxtExampleLayout show-tips example="nuxt-link" class="example">
|
||||
<NuxtPage />
|
||||
<template #tips>
|
||||
<p>
|
||||
This example shows different ways to use <code>Nuxtlink</code>.
|
||||
<code>components/myNuxtLink.js</code> defines a custom <code>NuxtLink</code>.
|
||||
</p>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,12 +16,17 @@ const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch
|
|||
</div>
|
||||
<template #tips>
|
||||
<div>
|
||||
Nuxt will automatically read files in the
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
|
||||
<code>~/server/api</code> directory
|
||||
</a>
|
||||
to create API endpoints. Learn more about
|
||||
<a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
|
||||
<p>
|
||||
This example shows how to use <code>useAsyncData</code> to fetch data from an API endpoint.
|
||||
</p>
|
||||
<p>
|
||||
Nuxt will automatically read files in the
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
|
||||
<code>~/server/api</code> directory
|
||||
</a>
|
||||
to create API endpoints. Learn more about
|
||||
<a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { t
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="use-fetch" :show-tips="true">
|
||||
<NuxtExampleLayout example="use-fetch" show-tips>
|
||||
<div>
|
||||
Fetch result:
|
||||
<pre class="text-left"><code>{{ data }}</code></pre>
|
||||
|
|
@ -14,12 +14,17 @@ const { data } = await useFetch(() => `/api/hello/${count.value}`, { params: { t
|
|||
</div>
|
||||
<template #tips>
|
||||
<div>
|
||||
Nuxt will automatically read in files in the
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
|
||||
<code>~/server/api</code> directory
|
||||
</a>
|
||||
to create API endpoints. Learn more about
|
||||
<a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>.
|
||||
<p>
|
||||
This example shows how to use <code>useFetch</code> to fetch data from an API endpoint.
|
||||
</p>
|
||||
<p>
|
||||
Nuxt will automatically read in files in the
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
|
||||
<code>~/server/api</code> directory
|
||||
</a>
|
||||
to create API endpoints. Learn more about
|
||||
<a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NuxtExampleLayout example="use-meta" :show-tips="true">
|
||||
<NuxtExampleLayout example="use-meta" show-tips>
|
||||
<div
|
||||
class="bg-gray-400/10 border-2 border-dashed border-gray-400/50 rounded-xl py-8 px-2 op-80"
|
||||
>
|
||||
|
|
@ -23,11 +23,16 @@
|
|||
|
||||
<template #tips>
|
||||
<div class="flex-auto">
|
||||
Learn more about
|
||||
<NuxtLink to="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
|
||||
Meta tags
|
||||
</NuxtLink>.
|
||||
Open in editor to see the source code 👉
|
||||
<p>
|
||||
This example shows how to use <code>useMeta</code> and Nuxt built-in components to bind meta data to the <code>head</code> of the page.
|
||||
</p>
|
||||
<p>
|
||||
Learn more about
|
||||
<NuxtLink to="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
|
||||
Meta tags
|
||||
</NuxtLink>.
|
||||
Open in editor to see the source code 👉
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout :show-tips="true" example="use-state">
|
||||
<NuxtExampleLayout show-tips example="use-state">
|
||||
<div>Counter: {{ counter }}</div>
|
||||
<div>
|
||||
<NButton class="font-mono" @click="counter++">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<NuxtExampleLayout :show-tips="true" example="with-components">
|
||||
<NuxtExampleLayout show-tips example="with-components">
|
||||
<h1 class="text-xl opacity-50">
|
||||
Auto Imported Components
|
||||
</h1>
|
||||
|
|
@ -8,15 +8,19 @@
|
|||
<HelloWorld class="text-2xl" />
|
||||
<Nuxt3 class="text-2xl" />
|
||||
<ParentFolderHello class="mt-6" />
|
||||
<NuxtWithPrefix class="mt-6" />
|
||||
</div>
|
||||
|
||||
<template #tips>
|
||||
<div>
|
||||
Components under <code>components/</code> folder are auto imported and can be directly used in your templates.
|
||||
Read more about
|
||||
<NuxtLink to="https://v3.nuxtjs.org/docs/directory-structure/components" target="_blank">
|
||||
the components directory.
|
||||
</NuxtLink>
|
||||
<p>Components under <code>components/</code> directory are auto imported and can be directly used in your templates.</p>
|
||||
<p>Other directories can be configured to support components auto-imports</p>
|
||||
<p>
|
||||
Read more about
|
||||
<NuxtLink to="https://v3.nuxtjs.org/docs/directory-structure/components" target="_blank">
|
||||
the components directory.
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
Awesome Component
|
||||
</div>
|
||||
<NCard class="flex flex-col gap-1 p-4">
|
||||
<code>nuxt.config.ts</code> can specify other directories like
|
||||
<code class="op50">`other-components-folder/`</code>
|
||||
to import components from and specify prefixes.
|
||||
</NCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ a }}
|
||||
{{ b }}
|
||||
{{ c }}
|
||||
{{ d }}
|
||||
{{ foo }}
|
||||
</div>
|
||||
<NuxtExampleLayout show-tips example="with-composables">
|
||||
<p>
|
||||
Named export <code>useA</code> : {{ a }}
|
||||
</p>
|
||||
<p>
|
||||
Named export <code>useB</code> : {{ b }}
|
||||
</p>
|
||||
<p>
|
||||
Named export <code>useC</code> : {{ c }}
|
||||
</p>
|
||||
<p>
|
||||
Named export <code>useD</code> : {{ d }}
|
||||
</p>
|
||||
<p>
|
||||
Default export <code>useFoo</code> : {{ foo }}
|
||||
</p>
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>
|
||||
This example shows how to use the <code>composables/</code> directory to auto import composables.
|
||||
</p>
|
||||
<p>
|
||||
If a default export is provided, the name of the composable will be mapped to the name of the file.
|
||||
Named exports can be used as-is.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function triggerError () {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="with-errors">
|
||||
<NuxtExampleLayout show-tips example="with-errors">
|
||||
<template #nav>
|
||||
<nav class="flex align-center gap-4 p-4">
|
||||
<NuxtLink to="/" class="n-link-base">
|
||||
|
|
@ -39,12 +39,18 @@ function triggerError () {
|
|||
</nav>
|
||||
</template>
|
||||
|
||||
<FaultyComponent />
|
||||
|
||||
<template #footer>
|
||||
<div class="text-center p-4 op-50">
|
||||
Current route: <code>{{ route.path }}</code>
|
||||
</div>
|
||||
</template>
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>This example shows how to handle errors in different contexts: pages, plugins, components and middleware.</p>
|
||||
<a href="https://v3.nuxtjs.org/docs/usage/error-handling" target="_blank">
|
||||
Read more about error handling
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<strong>Custom layout</strong>
|
||||
Header slot:
|
||||
<slot name="header">
|
||||
Default slot content
|
||||
Default slot content for <code>Custom</code> layout
|
||||
</slot>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineNuxtConfig } from 'nuxt3'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxt/ui'
|
||||
]
|
||||
})
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
Same layout as home
|
||||
<div class="p-4">
|
||||
Custom layout defined with <code>definePageMeta</code>
|
||||
<br>
|
||||
<NuxtLink to="/">
|
||||
Back to home
|
||||
</NuxtLink>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>Content inside <code>default</code> layout</p>
|
||||
<br>
|
||||
<NuxtLink to="/">
|
||||
Back to home
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
Manual control
|
||||
<div class="p-4">
|
||||
Custom layout defined dynamically with the <code>NuxtLayout</code> component
|
||||
<br>
|
||||
<NuxtLayout :name="layout">
|
||||
Default slot
|
||||
<button @click="layout ? layout = null : layout = 'custom'">
|
||||
<br>
|
||||
<button class="border p-1 rounded" @click="layout ? layout = null : layout = 'custom'">
|
||||
Switch layout
|
||||
</button>
|
||||
|
||||
|
|
@ -11,6 +13,7 @@
|
|||
Header slot
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
<br>
|
||||
<NuxtLink to="/">
|
||||
Back to home
|
||||
</NuxtLink>
|
||||
|
|
@ -1,18 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
Welcome to Nuxt Layouts 👋
|
||||
<NuxtExampleLayout show-tips example="with-layouts">
|
||||
<template #nav>
|
||||
<nav class="flex align-center gap-4 p-4">
|
||||
<NuxtLink to="/default">
|
||||
Default layout
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/custom">
|
||||
Custom layout
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/dynamic">
|
||||
Dynamic layout
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<NuxtLink to="/manual">
|
||||
Manual layout
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/same">
|
||||
Same layout
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>This example shows how to define default and custom layouts.</p>
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/layouts" target="_blank">
|
||||
Read more about layouts
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'custom'
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const route = useRoute()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="with-middleware">
|
||||
<NuxtExampleLayout show-tips example="with-middleware">
|
||||
<NuxtPage />
|
||||
|
||||
<template #nav>
|
||||
|
|
@ -25,5 +25,13 @@ const route = useRoute()
|
|||
Current route: <code>{{ route.path }}</code>
|
||||
</div>
|
||||
</template>
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>This example shows how to add route middleware with the <code>middleware/</code> directory or with a plugin, and how to use them globally or per page.</p>
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/middleware" target="_blank">
|
||||
Read more about middleware
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const route = useRoute()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="with-pages">
|
||||
<NuxtExampleLayout show-tips example="with-pages">
|
||||
<NuxtPage />
|
||||
|
||||
<template #nav>
|
||||
|
|
@ -34,5 +34,14 @@ const route = useRoute()
|
|||
Current route: <code>{{ route.path }}</code>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>This example shows how to use the <code>pages/</code> directory.</p>
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/pages" target="_blank">
|
||||
Read more about pages
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
<template>
|
||||
<NuxtExampleLayout example="with-plugins" show-tips>
|
||||
<div>{{ $myPlugin() }}</div>
|
||||
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>This example shows how to use the <code>plugins/</code> directory to auto-register plugins.</p>
|
||||
<a href="https://v3.nuxtjs.org/docs/directory-structure/plugins" target="_blank">
|
||||
Read more about plugins
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ function dec () {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout :show-tips="true" example="with-reactivity-transform">
|
||||
<NuxtExampleLayout show-tips example="with-reactivity-transform">
|
||||
<div>
|
||||
<Label :count="count" />
|
||||
<div class="flex gap-1 justify-center">
|
||||
|
|
@ -27,10 +27,15 @@ function dec () {
|
|||
|
||||
<template #tips>
|
||||
<div class="flex-auto">
|
||||
Read the documentation about
|
||||
<NLink href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
|
||||
Reactivity Transform.
|
||||
</NLink>
|
||||
<p>
|
||||
This example demonstrates the support of Reactivity transforms in Nuxt 3.
|
||||
</p>
|
||||
<p>
|
||||
Read the documentation about
|
||||
<a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank">
|
||||
Reactivity Transform.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const timer = useState('timer', () => 0)
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="with-universal-router">
|
||||
<NuxtExampleLayout show-tips example="with-universal-router">
|
||||
A page...
|
||||
<br>
|
||||
|
||||
|
|
@ -31,5 +31,13 @@ const timer = useState('timer', () => 0)
|
|||
Current route: <code>{{ route.path }}</code>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tips>
|
||||
<div>
|
||||
<p>
|
||||
This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,23 @@ const { data } = await useAsyncData('sum',
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtExampleLayout example="with-wasm">
|
||||
{{ a }} + {{ b }} = {{ data.sum }}
|
||||
<NuxtExampleLayout show-tips example="with-wasm">
|
||||
<p>
|
||||
<code>a = 100</code>
|
||||
</p>
|
||||
<p>
|
||||
<code>b = 250</code>
|
||||
</p>
|
||||
<p>
|
||||
Computation performed server-side with WASM :
|
||||
<br>
|
||||
<code>{{ a }} + {{ b }} = {{ data.sum }}</code>
|
||||
</p>
|
||||
|
||||
<template #tips>
|
||||
<p>
|
||||
This example demonstrates the server-side support of WebAssembly in Nuxt 3.
|
||||
</p>
|
||||
</template>
|
||||
</NuxtExampleLayout>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue