docs(frameworks-vue): add nuxt integration guide (#10268)

* docs(frameworks-vue): add nuxt integration guide

* docs(frameworks-vue): improve nuxt integration guide

docs/3-frameworks/03-Vue.md

@@ -55,6 +55,60 @@ import "@ui5/webcomponents/dist/Button.js";
 npm run dev
 ```
 
+## Setting up a Nuxt project with UI5 Web Components
+
+Nuxt is a popular JavaScript framework built on Vue.js, designed to create server-rendered, single-page, and statically generated applications. It simplifies the development process by offering features like routing, state management, and an extensive plugin ecosystem.
+
+### Step 1. Setup a Nuxt project
+
+To initialize a Nuxt project, please follow the instructions provided in the [official Nuxt documentation](https://nuxt.com/docs/getting-started/installation#new-project).
+
+### Step 2. Add UI5 Web Components
+```bash
+npm install @ui5/webcomponents
+```
+
+### Step 3. Configure the Nuxt application
+
+To avoid Vue's compiler treating UI5 Web Components as standard Vue components, you need to configure `compilerOptions.isCustomElement` in your `nuxt.config`.
+
+Here's an example:
+
+```ts
+// nuxt.config.ts
+
+// https://nuxt.com/docs/api/nuxt-config
+export default defineNuxtConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag.startsWith("ui5-"),
+    },
+  },
+})
+```
+
+### Step 4. Import the components that you are going to use
+
+In Nuxt, auto-import functionality does not work for UI5 Web Components. You must explicitly import each component you plan to use.
+
+```ts
+<script setup lang="ts">
+import "@ui5/webcomponents/dist/Button.js";
+</script>
+```
+
+### Step 5. Use the imported elements in your application
+
+```html
+<template>
+  <ui5-button>Hello world!</ui5-button>
+</template>
+```
+
+### Step 6. Launch the application
+```bash
+npm run dev
+```
 
 ## Two-Way Data Binding