{
  "name": "frameworks/vue",
  "title": "Vue 3",
  "description": "Tips for using eurodata-ui in your Vue 3 app.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/frameworks/vue/",
  "sections": [
    {
      "heading": "Vue 3",
      "markdown": ""
    },
    {
      "heading": "Installation",
      "markdown": "To add eurodata-ui to your Vue 3 app, install the package.\n\n```bash\npnpm add @eurodata/eurodata-ui\n```\n\nNext, include the eurodata-ui theme in your app, import the components you need, and start using them!\n\n```javascript\n// main.js\nimport '@eurodata/eurodata-ui/dist/styles/eurodata.css';\nimport '@eurodata/eurodata-ui/dist/components/button/button.js';\n```\n\n```html\n<template>\n  <ed-button variant=\"brand\">Button</ed-button>\n</template>\n```"
    },
    {
      "heading": "Enabling Custom Elements",
      "markdown": "Vue 3 will warn about unknown elements unless you tell it which tag names are custom elements. Configure this in your app setup.\n\nFor Vite-based projects, update `vite.config.js`:\n\n```javascript\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: tag => tag.startsWith('ed-')\n        }\n      }\n    })\n  ]\n});\n```\n\nFor Vue CLI projects, update `vue.config.js`:\n\n```javascript\nmodule.exports = {\n  chainWebpack: config => {\n    config.module\n      .rule('vue')\n      .use('vue-loader')\n      .tap(options => ({\n        ...options,\n        compilerOptions: {\n          isCustomElement: tag => tag.startsWith('ed-')\n        }\n      }));\n  }\n};\n```"
    },
    {
      "heading": "TypeScript",
      "markdown": "If you're using TypeScript, you can add type safety using the types file included with eurodata-ui.\n\n```\nnode_modules/@eurodata/eurodata-ui/dist/types/vue/index.d.ts\n```\n\nAdd the types to your project by updating your `tsconfig.json` file.\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"node_modules/@eurodata/eurodata-ui/dist/types/vue/index.d.ts\"]\n  }\n}\n```"
    },
    {
      "heading": "Event Handling",
      "markdown": "Many eurodata-ui components emit [native events](https://developer.mozilla.org/en-US/docs/Web/API/Event). For example, the [input component](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input) emits the `input` event when it receives input. Listen to events using the `@` shorthand.\n\n```html\n<ed-input @input=\"handleInput\"></ed-input>\n```\n\nFor custom events emitted by eurodata-ui (e.g. `ed-show`, `ed-hide`), use the full event name.\n\n```html\n<ed-drawer @ed-show=\"onDrawerShow\" @ed-hide=\"onDrawerHide\">\n  Drawer content\n</ed-drawer>\n```"
    },
    {
      "heading": "Two-Way Binding",
      "markdown": "Vue's `v-model` directive does not work with custom elements. Bind the `value` property and listen to the `input` event manually instead.\n\n```html\n<template>\n  <ed-input :value=\"name\" @input=\"name = $event.target.value\"></ed-input>\n  <p>Hello, !</p>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst name = ref('');\n</script>\n```"
    },
    {
      "heading": "Passing Complex Data",
      "markdown": "Vue uses attribute binding by default. For properties that accept objects or arrays, use the `.prop` modifier to pass the value as a property rather than an attribute.\n\n```html\n<ed-pagination :page-size-options.prop=\"[10, 25, 50, 100]\"></ed-pagination>\n```"
    }
  ]
}