docs: add links to examples (#4204)

docs/components/atoms/LinkExample.vue

@@ -0,0 +1,28 @@
+<template>
+  <Alert type="info" icon="🔎">
+    Read and edit a live example in <NuxtLink :to="link" v-text="computedTitle" />
+  </Alert>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import createTitle from '~/utils/createTitle'
+
+export default defineComponent({
+  props: {
+    link: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    computedTitle () {
+      return createTitle(this.title, this.link)
+    }
+  }
+})
+</script>

docs/components/atoms/ReadMore.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { splitByCase, upperFirst } from 'scule'
+import createTitle from '~/utils/createTitle'
 
 export default defineComponent({
   props: {
@@ -22,8 +22,7 @@ export default defineComponent({
   computed: {
     computedTitle () {
       // Guess title from link!
-      return this.title || this.link.split('/')
+      return createTitle(this.title, this.link)
-        .filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ')
     }
   }
 })

docs/content/2.guide/2.features/11.teleports.md

@@ -32,3 +32,5 @@ The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM n
   </ClientOnly>
 </template>
 ```
+
+:LinkExample{link="/examples/app/teleport"}

docs/content/2.guide/2.features/4.head-management.md

@@ -89,3 +89,5 @@ useHead({
 })
 </script>
 ```
+
+:LinkExample{link="/examples/composables/use-head"}

docs/content/2.guide/2.features/5.data-fetching.md

@@ -33,6 +33,8 @@ const { data } = await useAsyncData('count', () => $fetch('/api/count'))
 </template>
 ```
 
+:LinkExample{link="/examples/composables/use-async-data"}
+
 ## `useLazyAsyncData`
 
 This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
@@ -79,6 +81,8 @@ const { data } = await useFetch('/api/count')
 </template>
 ```
 
+:LinkExample{link="/examples/composables/use-fetch"}
+
 ## `useLazyFetch`
 
 This composable behaves identically to `useFetch` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).

docs/content/2.guide/2.features/6.state-management.md

@@ -45,7 +45,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </template>
 ```
 
-:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?terminal=dev" blank}
+:LinkExample{link="/examples/composables/use-state"}
 
 ::ReadMore{link="/api/composables/use-state"}
 ::
@@ -54,7 +54,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 
 In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a `locale` state.
 
-:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/locale?terminal=dev" blank}
+:LinkExample{link="/examples/other/locale"}
 
 ## Shared state
 

docs/content/2.guide/2.features/7.error-handling.md

@@ -126,3 +126,5 @@ If you navigate to another route, the error will be cleared automatically.
   </NuxtErrorBoundary>
 </template>
 ```
+
+:LinkExample{link="/examples/app/error-handling"}

docs/content/2.guide/2.features/8.plugins.md

@@ -5,3 +5,5 @@
 
 ::ReadMore{link="/guide/directory-structure/plugins"}
 ::
+
+:LinkExample{link="/examples/app/plugins"}

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -182,6 +182,8 @@ definePageMeta({
 </script>
 ```
 
+:LinkExample{link="/examples/routing/pages"}
+
 ## Page Metadata
 
 You might want to define metadata for each route in your app. You can do this using the `definePageMeta` macro, which will work both in `<script>` and in `<script setup>`:

docs/content/2.guide/3.directory-structure/11.plugins.md

@@ -121,3 +121,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   })
 })
 ```
+
+:LinkExample{link="/examples/app/plugins"}

docs/content/2.guide/3.directory-structure/4.components.md

@@ -229,3 +229,5 @@ export default {
 ```
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
+
+:LinkExample{link="/examples/auto-imports/components"}

docs/content/2.guide/3.directory-structure/5.composables.md

@@ -54,3 +54,5 @@ You can now auto-import it:
 const foo = useFoo()
 </script>
 ```
+
+:LinkExample{link="/examples/auto-imports/composables"}

docs/content/2.guide/3.directory-structure/6.layouts.md

@@ -110,3 +110,5 @@ definePageMeta({
 });
 </script>
 ```
+
+:LinkExample{link="/examples/routing/layouts"}

docs/content/2.guide/3.directory-structure/7.middleware.md

@@ -84,3 +84,5 @@ definePageMeta({
 ```
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
+
+:LinkExample{link="/examples/routing/middleware"}

docs/content/3.api/1.composables/use-cookie.md

@@ -152,3 +152,5 @@ export default (req, res) => {
   return { counter }
 }
 ```
+
+:LinkExample{link="/examples/composables/use-cookie"}

docs/content/3.api/2.components/4.nuxt-link.md

@@ -116,3 +116,5 @@ defineNuxtLink({
 - **externalRelAttribute**: A default `rel` attribute value applied on external links. Defaults to `"noopener noreferrer"`. Set it to `""` to disable
 - **activeClass**: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/#linkactiveclass). Defaults to Vue Router's default (`"router-link-active"`)
 - **exactActiveClass**: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/#linkexactactiveclass). Defaults to Vue Router's default (`"router-link-exact-active"`)
+
+:LinkExample{link="/examples/routing/nuxt-link"}

docs/utils/createTitle.js

@@ -0,0 +1,5 @@
+import { splitByCase, upperFirst } from 'scule'
+
+export default (title, link) => {
+  return title || link.split('/').filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ').replace('Api', 'API')
+}