Javascript

You can use UIkit 3 JS components by adding the data-uk-<component-name> or uk-component

Enable Javascript

nuxt.config.ts

uikit3: {
  // ...css options
  js: true
}

Using data attributes

Using data-uk-<component-name> or just uk-<component-name>:

<script setup lang="ts">
  const items = [
    { 
      title: 'Item', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
    },
    { 
      title: 'Item', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
    },
    { 
      title: 'Item', 
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
    }
  ]
</script>

<template>
  <ul data-uk-accordion>
    <li v-for="(item, i) in items" :key="i">
      <a class="uk-accordion-title" href="#">
        {{ item.title }} {{ i }}
      </a>
      <div class="uk-accordion-content">
        <p>
          {{ item.content }}
        </p>
      </div>
    </li>
  </ul>
</template>

Using useUIkit3 Composable

The module provides a composable to access UIkit javascript api programatically. see UIkit docs

file.vue

<script setup lang="ts">
  const uikit = useUIkit3()
  
  function handleShowModal() {
    uikit?.modal.confirm('UIkit confirm!')
    .then(
      function () {
        console.log('Confirmed.')
      },
      function () {
        console.log('Rejected.')
      }
    )
</script>

<template>
  <button 
    type="button" 
    class="uk-button" 
    @click="handleShowModal"
  >
    Show modal
  </button>
</template>

UsageCSS

UsageIcons