diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md index 952993a149..5d50d4f91b 100644 --- a/docs/1.getting-started/2.installation.md +++ b/docs/1.getting-started/2.installation.md @@ -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 diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md index 7db222a7c6..75768a9599 100644 --- a/docs/1.getting-started/3.configuration.md +++ b/docs/1.getting-started/3.configuration.md @@ -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 diff --git a/docs/1.getting-started/3.views.md b/docs/1.getting-started/3.views.md index 4a78fd7465..445ff82c94 100644 --- a/docs/1.getting-started/3.views.md +++ b/docs/1.getting-started/3.views.md @@ -138,7 +138,7 @@ If you only need to modify the ``, 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. diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md index a3b19f2257..d2f2a12d29 100644 --- a/docs/1.getting-started/4.assets.md +++ b/docs/1.getting-started/4.assets.md @@ -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: { diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md index 2d21263b82..5fd268055d 100644 --- a/docs/1.getting-started/4.styling.md +++ b/docs/1.getting-started/4.styling.md @@ -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('') @@ -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: { diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md index 0601cc11a3..605a0171c2 100644 --- a/docs/1.getting-started/5.routing.md +++ b/docs/1.getting-started/5.routing.md @@ -71,7 +71,7 @@ When a [``](/docs/api/components/nuxt-link) enters the viewport on the The [`useRoute()`](/docs/api/composables/use-route) composable can be used in a ` ``` - ```vue [useSeoMeta] + ```vue twoslash [useSeoMeta] +``` + +```vue twoslash [app.vue] + ``` -```html [app.vue] +```vue [app.vue] @@ -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]