Vue

DDA with Vue

This is a step-by-step guide to use the DDA components in Vue.

Setup

First, install the package @dubai-design-system/components-vue

npm i @dubai-design-system/components-vue

For Versions 3.11.0+, add CSS reference as below:

import '@dubai-design-system/components-js/dist/dda/dda.css';

Next, install the font-awesome package which is the icon package used by DDA:

Start by adding the material-icons package inside the <head> tag

<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>

In your main.js file, import your component library plugin and use it:

<script>

// src/main.js

import { ComponentLibrary } from '@dubai-design-system/components-vue';

createApp(App).use(ComponentLibrary).mount('#app');

</script>

<script>    
    import { DdaButton } from '@dubai-design-system/components-vue';
</script>

<template>
    <div>
        <DdaButton
            button_color="default-primary"
            start_icon="sentiment_satisfied"
            end_icon="arrow_forward"
            custom_class=""
            component_mode=""
            button_id="button"
            aria_label="button"
            onclick="console.log('clicked')"
        ><!---->Button</DdaButton>
    </div>
</template>

PreviousReact NextAngular

Last updated 5 months ago

hashtagDDA with Vue

hashtagSetup

DDA with Vue

Setup