mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 15:15:19 +00:00
docs: enable twoslash for some code snippets (#25679)
This commit is contained in:
Anthony Fu
GitHub
parent
ae83df8c43
commit
3c271413f8
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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 }
|
||||
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
@ -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('/')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user