Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: enable twoslash for some code snippets (#25679)

Browse Source
This commit is contained in:
Anthony Fu 2024-02-07 17:18:48 +01:00 committed by GitHub
parent ae83df8c43
commit 3c271413f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/1.getting-started/2.installation.md
View File

@ -34,7 +34,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
typescript: {
shim: false

12
docs/1.getting-started/3.configuration.md
View File

@ -13,7 +13,7 @@ The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file is loca
A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
// My Nuxt config
})
@ -33,7 +33,7 @@ You don't have to use TypeScript to build an application with Nuxt. However, it
You can configure fully typed, per-environment overrides in your nuxt.config
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
$production: {
routeRules: {
@ -58,7 +58,7 @@ Those values should be defined in `nuxt.config` and can be overridden using envi
::code-group
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
runtimeConfig: {
// The private keys which are only available server-side
@ -164,7 +164,7 @@ If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`,
- `vite.vue` for `@vitejs/plugin-vue`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
- `vite.vueJsx` for `@vitejs/plugin-vue-jsx`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx).
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
vite: {
vue: {
@ -183,7 +183,7 @@ export default defineNuxtConfig({
If you use webpack and need to configure `vue-loader`, you can do this using `webpack.loaders.vue` key inside your `nuxt.config` file. The available options are [defined here](https://github.com/vuejs/vue-loader/blob/main/src/index.ts#L32-L62).
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
webpack: {
loaders: {
@ -201,7 +201,7 @@ export default defineNuxtConfig({
You may need to enable experimental features in Vue, such as `propsDestructure`. Nuxt provides an easy way to do that in `nuxt.config.ts`, no matter which builder you are using:
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
vue: {
propsDestructure: true

2
docs/1.getting-started/3.views.md
View File

@ -138,7 +138,7 @@ If you only need to modify the `<head>`, you can refer to the [SEO and meta sect
You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
```ts [server/plugins/extend-html.ts]
```ts twoslash [server/plugins/extend-html.ts]
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
// This will be an object representation of the html template.

4
docs/1.getting-started/4.assets.md
View File

@ -73,7 +73,7 @@ In your `nuxt.config`
::code-group
```ts [SCSS]
```ts twoslash [SCSS]
export default defineNuxtConfig({
vite: {
css: {
@ -87,7 +87,7 @@ export default defineNuxtConfig({
})
```
```ts [SASS]
```ts twoslash [SASS]
export default defineNuxtConfig({
vite: {
css: {

12
docs/1.getting-started/4.styling.md
View File

@ -107,7 +107,7 @@ You can include external stylesheets in your application by adding a link elemen
You can manipulate the head with the [`app.head`](/docs/api/nuxt-config#head) property of your Nuxt configuration:
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
head: {
@ -122,7 +122,7 @@ You can use the useHead composable to dynamically set a value in your head in yo
:read-more{to="/docs/api/composables/use-head"}
```ts
```ts twoslash
useHead({
link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})
@ -136,7 +136,7 @@ If you need more advanced control, you can intercept the rendered html with a ho
Create a plugin in `~/server/plugins/my-plugin.ts` like this:
```ts [server/plugins/my-plugin.ts]
```ts twoslash [server/plugins/my-plugin.ts]
export default defineNitroPlugin((nitro) => {
nitro.hooks.hook('render:html', (html) => {
html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
@ -177,7 +177,7 @@ You can then import your source files in your `app.vue` (or layouts files) using
Alternatively, you can use the `css` property of your Nuxt configuration.
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
css: ['~/assets/scss/main.scss']
})
@ -209,7 +209,7 @@ Then in your `nuxt.config` :
::code-group
```ts [SCSS]
```ts twoslash [SCSS]
export default defineNuxtConfig({
vite: {
css: {
@ -223,7 +223,7 @@ export default defineNuxtConfig({
})
```
```ts [SASS]
```ts twoslash [SASS]
export default defineNuxtConfig({
vite: {
css: {

10
docs/1.getting-started/5.routing.md
View File

@ -71,7 +71,7 @@ When a [`<NuxtLink>`](/docs/api/components/nuxt-link) enters the viewport on the
The [`useRoute()`](/docs/api/composables/use-route) composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
```vue [pages/posts/[id\\].vue]
```vue twoslash [pages/posts/[id\\].vue]
<script setup lang="ts">
const route = useRoute()
@ -100,7 +100,9 @@ Example of an `auth` middleware protecting the `/dashboard` page:
::code-group
```ts [middleware/auth.ts]
```ts twoslash [middleware/auth.ts]
function isAuthenticated(): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if a user is authenticated
if (isAuthenticated() === false) {
@ -109,7 +111,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
})
```
```html [pages/dashboard.vue]
```vue twoslash [pages/dashboard.vue]
<script setup lang="ts">
definePageMeta({
middleware: 'auth'
@ -133,7 +135,7 @@ The `validate` property accepts the `route` as an argument. You can return a boo
If you have a more complex use case, then you can use anonymous route middleware instead.
```vue [pages/posts/[id\\].vue]
```vue twoslash [pages/posts/[id\\].vue]
<script setup lang="ts">
definePageMeta({
validate: async (route) => {

33
docs/1.getting-started/5.seo-meta.md
View File

@ -8,7 +8,7 @@ navigation.icon: i-ph-file-search-duotone
Out-of-the-box, Nuxt provides sane defaults, which you can override if needed.
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
head: {
@ -34,7 +34,7 @@ powered by [Unhead](https://unhead.unjs.io).
As with all composables, it can only be used with a components `setup` and lifecycle hooks.
```vue [app.vue]
```vue twoslash [app.vue]
<script setup lang="ts">
useHead({
title: 'My App',
@ -57,7 +57,7 @@ The [`useSeoMeta`](/docs/api/composables/use-seo-meta) composable lets you defin
This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
```vue [app.vue]
```vue twoslash [app.vue]
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
@ -92,7 +92,7 @@ const title = ref('Hello World')
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</Head>
<h1>{{ title }}</h1>
@ -132,7 +132,7 @@ It's recommended to use getters (`() => value`) over computed (`computed(() => v
::code-group
```vue [useHead]
```vue twoslash [useHead]
<script setup lang="ts">
const description = ref('My amazing site.')
@ -144,7 +144,7 @@ It's recommended to use getters (`() => value`) over computed (`computed(() => v
</script>
```
```vue [useSeoMeta]
```vue twoslash [useSeoMeta]
<script setup lang="ts">
const description = ref('My amazing site.')
@ -178,7 +178,7 @@ If you want to use a function (for full control), then this cannot be set in you
::code-group
```vue [useHead]
```vue twoslash [useHead]
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
@ -198,7 +198,7 @@ You can use the `tagPosition: 'bodyClose'` option on applicable tags to append t
For example:
```vue
```vue twoslash
<script setup lang="ts">
useHead({
script: [
@ -220,7 +220,7 @@ Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can
For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
```vue [pages/some-page.vue]
```vue twoslash [pages/some-page.vue]
<script setup lang="ts">
definePageMeta({
title: 'Some Page'
@ -230,7 +230,7 @@ definePageMeta({
And then in your layout file, you might use the route's metadata you have previously set:
```vue [layouts/default.vue]
```vue twoslash [layouts/default.vue]
<script setup lang="ts">
const route = useRoute()
@ -248,13 +248,20 @@ useHead({
In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
```vue [app.vue]
```vue twoslash [app.vue]
<script setup lang="ts">
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
// ... or as a function
})
</script>
```
```vue twoslash [app.vue]
<script setup lang="ts">
useHead({
// or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
@ -272,7 +279,7 @@ The example below shows how you might enable Google Fonts using either the `link
::code-group
```vue [useHead]
```vue twoslash [useHead]
<script setup lang="ts">
useHead({
link: [

46
docs/1.getting-started/5.transitions.md
View File

@ -12,7 +12,7 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti
You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/pages).
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' }
@ -28,7 +28,7 @@ To start adding transition between your pages, add the following CSS to your [`a
::code-group
```html [app.vue]
```vue [app.vue]
<template>
<NuxtPage />
</template>
@ -46,7 +46,7 @@ To start adding transition between your pages, add the following CSS to your [`a
</style>
```
```html [pages/index.vue]
```vue [pages/index.vue]
<template>
<div>
<h1>Home page</h1>
@ -55,7 +55,7 @@ To start adding transition between your pages, add the following CSS to your [`a
</template>
```
```html [pages/about.vue]
```vue [pages/about.vue]
<template>
<div>
<h1>About page</h1>
@ -76,7 +76,7 @@ To set a different transition for a page, set the `pageTransition` key in [`defi
::code-group
```vue [pages/about.vue]
```vue twoslash [pages/about.vue]
<script setup lang="ts">
definePageMeta({
pageTransition: {
@ -86,7 +86,7 @@ definePageMeta({
</script>
```
```html [app.vue]
```vue [app.vue]
<template>
<NuxtPage />
</template>
@ -129,7 +129,7 @@ To start adding transition between your pages and layouts, add the following CSS
::code-group
```html [app.vue]
```vue [app.vue]
<template>
<NuxtLayout>
<NuxtPage />
@ -148,7 +148,7 @@ To start adding transition between your pages and layouts, add the following CSS
</style>
```
```html [layouts/default.vue]
```vue [layouts/default.vue]
<template>
<div>
<pre>default layout</pre>
@ -163,7 +163,7 @@ div {
</style>
```
```html [layouts/orange.vue]
```vue [layouts/orange.vue]
<template>
<div>
<pre>orange layout</pre>
@ -180,7 +180,7 @@ div {
</style>
```
```html [pages/index.vue]
```vue [pages/index.vue]
<template>
<div>
<h1>Home page</h1>
@ -189,7 +189,7 @@ div {
</template>
```
```html [pages/about.vue]
```vue [pages/about.vue]
<script setup lang="ts">
definePageMeta({
layout: 'orange'
@ -231,7 +231,7 @@ You can customize these default transition names globally using `nuxt.config`.
Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
pageTransition: {
@ -252,7 +252,7 @@ If you change the `name` property, you also have to rename the CSS classes accor
To override the global transition property, use the `definePageMeta` to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file.
```vue [pages/some-page.vue]
```vue twoslash [pages/some-page.vue]
<script setup lang="ts">
definePageMeta({
pageTransition: {
@ -267,7 +267,7 @@ definePageMeta({
`pageTransition` and `layoutTransition` can be disabled for a specific route:
```vue [pages/some-page.vue]
```vue twoslash [pages/some-page.vue]
<script setup lang="ts">
definePageMeta({
pageTransition: false,
@ -278,8 +278,8 @@ definePageMeta({
Or globally in the `nuxt.config`:
```ts [nuxt.config.ts]
defineNuxtConfig({
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false
@ -293,7 +293,7 @@ For advanced use-cases, you can use JavaScript hooks to create highly dynamic an
This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://gsap.com).
```vue [pages/some-page.vue]
```vue twoslash [pages/some-page.vue]
<script setup lang="ts">
definePageMeta({
pageTransition: {
@ -319,7 +319,7 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
::code-group
```html [pages/[id\\].vue]
```vue twoslash [pages/[id\\].vue]
<script setup lang="ts">
definePageMeta({
pageTransition: {
@ -362,7 +362,7 @@ definePageMeta({
</style>
```
```html [layouts/default.vue]
```vue [layouts/default.vue]
<script setup lang="ts">
const route = useRoute()
const id = computed(() => Number(route.params.id || 1))
@ -418,7 +418,7 @@ You can check a demo on https://nuxt-view-transitions.surge.sh and the [source o
The Nuxt integration is under active development, but can be enabled with the `experimental.viewTransition` option in your configuration file:
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
viewTransition: true
@ -432,7 +432,7 @@ If set to true, Nuxt will not apply transitions if the user's browser matches `p
By default, view transitions are enabled for all [pages](/docs/guide/directory-structure/pages), but you can set a different global default.
```ts [nuxt.config.ts]
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
// Disable view transitions globally, and opt-in on a per page basis
@ -443,7 +443,7 @@ export default defineNuxtConfig({
It is possible to override the default `viewTransition` value for a page by setting the `viewTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
```vue [pages/about.vue]
```vue twoslash [pages/about.vue]
<script setup lang="ts">
definePageMeta({
viewTransition: false
@ -457,7 +457,7 @@ Overriding view transitions on a per-page basis will only have an effect if you
If you are also using Vue transitions like `pageTransition` and `layoutTransition` (see above) to achieve the same result as the new View Transitions API, then you may wish to _disable_ Vue transitions if the user's browser supports the newer, native web API. You can do this by creating `~/middleware/disable-vue-transitions.global.ts` with the following contents:
```js
```ts
export default defineNuxtRouteMiddleware(to => {
if (import.meta.server || !document.startViewTransition) { return }

2
docs/2.guide/2.directory-structure/1.components.md
View File

@ -123,7 +123,7 @@ const show = ref(false)
You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.
```html [pages/index.vue]
```vue [pages/index.vue]
<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

2
docs/3.api/4.commands/module.md
View File

@ -48,6 +48,6 @@ The command searches for Nuxt modules matching your query that are compatible wi
**Example:**
```base [Terminal]
```bash [Terminal]
npx nuxi module search pinia
```

2
docs/6.bridge/4.plugins-and-middleware.md
View File

@ -30,7 +30,7 @@ You can now migrate to the Nuxt 3 middleware API, which is slightly different in
Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/guide/directory-structure/middleware).
```js
```ts twoslash
export default defineNuxtRouteMiddleware((to) => {
if (to.path !== '/') {
return navigateTo('/')