diff --git a/docs/1.getting-started/1.introduction.md b/docs/1.getting-started/1.introduction.md index 2860e5bde3..90f7e84da0 100644 --- a/docs/1.getting-started/1.introduction.md +++ b/docs/1.getting-started/1.introduction.md @@ -2,7 +2,7 @@ title: Introduction description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind. navigation: - icon: i-ph-info-duotone + icon: i-ph-info --- Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org). diff --git a/docs/1.getting-started/10.deployment.md b/docs/1.getting-started/10.deployment.md index 9043f0035c..5b17574f89 100644 --- a/docs/1.getting-started/10.deployment.md +++ b/docs/1.getting-started/10.deployment.md @@ -1,7 +1,7 @@ --- title: 'Deployment' description: Learn how to deploy your Nuxt application to any hosting provider. -navigation.icon: i-ph-cloud-duotone +navigation.icon: i-ph-cloud --- A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments. diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md index aa5df5c718..dce433a768 100644 --- a/docs/1.getting-started/11.testing.md +++ b/docs/1.getting-started/11.testing.md @@ -1,7 +1,7 @@ --- title: Testing description: How to test your Nuxt application. -navigation.icon: i-ph-check-circle-duotone +navigation.icon: i-ph-check-circle --- ::tip @@ -10,7 +10,7 @@ If you are a module author, you can find more specific information in the [Modul Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem. -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"} Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`. :: diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md index 096aa164a6..760bb6ab1e 100644 --- a/docs/1.getting-started/12.upgrade.md +++ b/docs/1.getting-started/12.upgrade.md @@ -1,7 +1,7 @@ --- title: Upgrade Guide description: 'Learn how to upgrade to the latest Nuxt version.' -navigation.icon: i-ph-arrow-circle-up-duotone +navigation.icon: i-ph-arrow-circle-up --- @@ -47,7 +47,7 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+. -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"} Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already. :: diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md index 42bba1705b..128a135f57 100644 --- a/docs/1.getting-started/2.installation.md +++ b/docs/1.getting-started/2.installation.md @@ -1,7 +1,7 @@ --- title: 'Installation' description: 'Get started with Nuxt quickly with our online starters or start locally with your terminal.' -navigation.icon: i-ph-play-duotone +navigation.icon: i-ph-play --- ## Play Online @@ -94,7 +94,7 @@ bun run dev -o ``` :: -::tip{icon="i-ph-check-circle-duotone"} +::tip{icon="i-ph-check-circle"} Well done! A browser window should automatically open for . :: diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md index f3805f283f..866de735f5 100644 --- a/docs/1.getting-started/3.configuration.md +++ b/docs/1.getting-started/3.configuration.md @@ -1,7 +1,7 @@ --- title: Configuration description: Nuxt is configured with sensible defaults to make you productive. -navigation.icon: i-ph-gear-duotone +navigation.icon: i-ph-gear --- @@ -46,7 +46,7 @@ export default defineNuxtConfig({ }) ``` -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"} Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`. :: diff --git a/docs/1.getting-started/3.views.md b/docs/1.getting-started/3.views.md index a3275b05c2..e169bdfa66 100644 --- a/docs/1.getting-started/3.views.md +++ b/docs/1.getting-started/3.views.md @@ -1,7 +1,7 @@ --- title: 'Views' description: 'Nuxt provides several component layers to implement the user interface of your application.' -navigation.icon: i-ph-layout-duotone +navigation.icon: i-ph-layout --- ## `app.vue` diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md index ac0b964a2e..a46f973deb 100644 --- a/docs/1.getting-started/4.assets.md +++ b/docs/1.getting-started/4.assets.md @@ -1,7 +1,7 @@ --- title: 'Assets' description: 'Nuxt offers two options for your assets.' -navigation.icon: i-ph-image-duotone +navigation.icon: i-ph-image --- Nuxt uses two directories to handle assets like stylesheets, fonts or images. diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md index 61ae9da785..383bed144b 100644 --- a/docs/1.getting-started/4.styling.md +++ b/docs/1.getting-started/4.styling.md @@ -1,7 +1,7 @@ --- title: 'Styling' description: 'Learn how to style your Nuxt application.' -navigation.icon: i-ph-palette-duotone +navigation.icon: i-ph-palette --- Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets. diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md index e39d5d446b..e732502f6c 100644 --- a/docs/1.getting-started/5.routing.md +++ b/docs/1.getting-started/5.routing.md @@ -1,7 +1,7 @@ --- title: 'Routing' description: Nuxt file-system routing creates a route for every file in the pages/ directory. -navigation.icon: i-ph-signpost-duotone +navigation.icon: i-ph-signpost --- One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/guide/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route. diff --git a/docs/1.getting-started/5.seo-meta.md b/docs/1.getting-started/5.seo-meta.md index 91b8fed31f..46a3f2298d 100644 --- a/docs/1.getting-started/5.seo-meta.md +++ b/docs/1.getting-started/5.seo-meta.md @@ -1,7 +1,7 @@ --- title: SEO and Meta description: Improve your Nuxt app's SEO with powerful head config, composables and components. -navigation.icon: i-ph-file-search-duotone +navigation.icon: i-ph-file-search --- ## Defaults diff --git a/docs/1.getting-started/5.transitions.md b/docs/1.getting-started/5.transitions.md index ccabe0ed6d..dcef4b284e 100644 --- a/docs/1.getting-started/5.transitions.md +++ b/docs/1.getting-started/5.transitions.md @@ -1,7 +1,7 @@ --- title: 'Transitions' description: Apply transitions between pages and layouts with Vue or native browser View Transitions. -navigation.icon: i-ph-exclude-square-duotone +navigation.icon: i-ph-exclude-square --- ::note diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md index 39d82835c2..44bedcda96 100644 --- a/docs/1.getting-started/6.data-fetching.md +++ b/docs/1.getting-started/6.data-fetching.md @@ -1,7 +1,7 @@ --- title: 'Data fetching' description: Nuxt provides composables to handle data fetching within your application. -navigation.icon: i-ph-plugs-connected-duotone +navigation.icon: i-ph-plugs-connected --- Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch`. @@ -54,7 +54,7 @@ const { data: count } = await useFetch('/api/count') This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility. -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"} Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way! :: @@ -97,7 +97,7 @@ The `useAsyncData` composable is responsible for wrapping async logic and return It's developer experience sugar for the most common use case. :: -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"} Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`. :: diff --git a/docs/1.getting-started/7.state-management.md b/docs/1.getting-started/7.state-management.md index 46e7b08ba2..94bf67f6b9 100644 --- a/docs/1.getting-started/7.state-management.md +++ b/docs/1.getting-started/7.state-management.md @@ -1,14 +1,14 @@ --- title: 'State Management' description: Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state. -navigation.icon: i-ph-database-duotone +navigation.icon: i-ph-database --- Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components. [`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key. -::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"} +::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"} Watch a video from Alexander Lichter about why and when to use `useState()`. :: @@ -27,7 +27,7 @@ Never define `const state = ref()` outside of `