docs: replace callout to UnDocs components

docs/1.getting-started/10.deployment.md

@@ -6,7 +6,7 @@ navigation.icon: i-ph-cloud-duotone
 
 A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.
 
-::callout
+::tip
 If you are looking for a list of cloud providers that support Nuxt 3, see the [Hosting providers](/deploy) section.
 ::
 

docs/1.getting-started/11.testing.md

@@ -4,7 +4,7 @@ description: How to test your Nuxt application.
 navigation.icon: i-ph-check-circle-duotone
 ---
 
-::callout
+::tip
 If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing).
 ::
 
@@ -53,7 +53,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
 
    ```ts twoslash
    import { defineVitestConfig } from '@nuxt/test-utils/config'
-   
+
    export default defineVitestConfig({
      // any custom Vitest config you require
    })
@@ -68,7 +68,7 @@ You can opt in to a Nuxt environment by adding `.nuxt.` to the test file's name
    ```ts twoslash
    // @vitest-environment nuxt
    import { test } from 'vitest'
-   
+
    test('my test', () => {
      // ... test with Nuxt environment!
    })
@@ -108,12 +108,10 @@ test('my test', () => {
 })
 ```
 
-::callout{icon="i-ph-warning-duotone" color="amber"}
-
+::warning
 When you run your tests within the Nuxt environment, they will be running in a [`happy-dom`](https://github.com/capricorn86/happy-dom) or [`jsdom`](https://github.com/jsdom/jsdom) environment. Before your tests run, a global Nuxt app will be initialized (including, for example, running any plugins or code you've defined in your `app.vue`).
 
 This means you should take particular care not to mutate the global state in your tests (or, if you need to, to reset it afterwards).
-
 ::
 
 ### 🎭 Built-In Mocks
@@ -270,7 +268,7 @@ mockNuxtImport('useStorage', () => {
 // Then, inside a test
 useStorageMock.mockImplementation(() => {
   return { value: 'something else' }
-}) 
+})
 ```
 
 #### `mockComponent`

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

@@ -25,7 +25,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
 - **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
 - **Terminal** - In order to run Nuxt commands
 
-::callout
+::note
   ::details
   :summary[Additional notes for an optimal setup:]
   - **Node.js**: Make sure to use an even numbered version (18, 20, etc)
@@ -96,7 +96,7 @@ bun install
 
 ::
 
-::callout
+::note
 If you are using Yarn 2+ (Berry), add `nodeLinker: node-modules` to your `.yarnrc.yml` file.
 [You can follow this issue status here](https://github.com/nuxt/nuxt/issues/22861)
 ::
@@ -124,7 +124,7 @@ bun run dev -o
 ```
 ::
 
-::callout{icon="i-ph-check-circle-duotone"}
+::tip{icon="i-ph-check-circle-duotone"}
 Well done! A browser window should automatically open for <http://localhost:3000>.
 ::
 

docs/1.getting-started/3.configuration.md

@@ -25,7 +25,7 @@ This file will often be mentioned in the documentation, for example to add custo
 Every option is described in the **Configuration Reference**.
 ::
 
-::callout
+::note
 You don't have to use TypeScript to build an application with Nuxt. However, it is strongly recommended to use the `.ts` extension for the `nuxt.config` file. This way you can benefit from hints in your IDE to avoid typos and mistakes while editing your configuration.
 ::
 
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::note
 If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use.
 ::
 

docs/1.getting-started/3.views.md

@@ -18,7 +18,7 @@ By default, Nuxt will treat this file as the **entrypoint** and render its conte
 </template>
 ```
 
-::callout
+::tip
 If you are familiar with Vue, you might wonder where `main.js` is (the file that normally creates a Vue app). Nuxt does this behind the scene.
 ::
 
@@ -90,7 +90,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 
 Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
-::callout
+::note
 If you only have a single layout in your application, we recommend using [`app.vue`](/docs/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.
 ::
 
@@ -131,7 +131,7 @@ If you want to create more layouts and learn how to use them in your pages, find
 
 ## Advanced: Extending the HTML template
 
-::callout
+::note
 If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta).
 ::
 
@@ -140,7 +140,7 @@ The callback function of the `render:html` hook allows you to mutate the HTML be
 
 ```ts twoslash [server/plugins/extend-html.ts]
 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook('render:html', (html, { event }) => { 
+  nitroApp.hooks.hook('render:html', (html, { event }) => {
     // This will be an object representation of the html template.
     console.log(html)
     html.head.push(`<meta name="description" content="My custom description" />`)

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

@@ -43,7 +43,7 @@ For example, referencing an image file that will be processed if a build tool is
 </template>
 ```
 
-::callout
+::note
 Nuxt won't serve files in the [`assets/`](/docs/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
 ::
 

docs/1.getting-started/4.styling.md

@@ -30,7 +30,7 @@ import('~/assets/css/first.css')
 </style>
 ```
 
-::callout
+::tip
 The stylesheets will be inlined in the HTML rendered by Nuxt.
 ::
 
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::tip
 The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.
 ::
 
@@ -183,7 +183,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::tip
 In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.
 ::
 
@@ -286,7 +286,7 @@ const classObject = computed(() => ({
 ```
 
 ```vue [Array]
-<script setup lang="ts"> 
+<script setup lang="ts">
 const isActive = ref(true)
 const errorClass = ref('text-danger')
 </script>
@@ -489,7 +489,7 @@ Nuxt comes with the same `<Transition>` element that Vue has, and also has suppo
 
 We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
 
-::callout
+::tip
 Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!
 ::
 

docs/1.getting-started/5.routing.md

@@ -86,7 +86,7 @@ console.log(route.params.id)
 
 Nuxt provides a customizable route middleware framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
 
-::callout
+::note
 Route middleware runs within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
 ::
 

docs/1.getting-started/5.seo-meta.md

@@ -21,7 +21,7 @@ export default defineNuxtConfig({
 
 Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to customize the head for your entire app.
 
-::callout
+::important
 This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
 ::
 
@@ -143,7 +143,7 @@ It's recommended to use getters (`() => value`) over computed (`computed(() => v
   })
   </script>
   ```
-  
+
   ```vue twoslash [useSeoMeta]
   <script setup lang="ts">
   const description = ref('My amazing site.')
@@ -158,7 +158,7 @@ It's recommended to use getters (`() => value`) over computed (`computed(() => v
   <script setup lang="ts">
   const description = ref('My amazing site.')
   </script>
-  
+
   <template>
     <div>
       <Meta name="description" :content="description" />

docs/1.getting-started/5.transitions.md

@@ -4,7 +4,7 @@ description: Apply transitions between pages and layouts with Vue or native brow
 navigation.icon: i-ph-exclude-square-duotone
 ---
 
-::callout
+::note
 Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component to apply transitions between pages and layouts.
 ::
 
@@ -20,7 +20,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::note
 If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/getting-started/transitions#layout-transitions).
 ::
 
@@ -246,7 +246,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout
+::warning
 If you change the `name` property, you also have to rename the CSS classes accordingly.
 ::
 
@@ -309,7 +309,7 @@ definePageMeta({
 </script>
 ```
 
-::callout
+::tip
 Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) available in the `Transition` component.
 ::
 
@@ -407,7 +407,7 @@ When `<NuxtPage />` is used in `app.vue`, transition-props can be passed directl
 </template>
 ```
 
-::callout
+::note
 Remember, this page transition cannot be overridden with `definePageMeta` on individual pages.
 ::