Installation

This page will show you how to install and use Lume in your project.

Installing Lume

To install Lume, run the following command:

Vue 2.7+

npm install @adyen/lume

Vue 3

npm install @adyen/lume-vue3

Using Lume

There are two ways to use Lume in your Vue app: by importing single components or using the plugin:

Importing components

Options API:

<script lang="ts">
import { defineComponent } from 'vue';
import { LumeBarChart, LumeLineChart } from '@adyen/lume';

export default defineComponent({
  components: { LumeBarChart, LumeLineChart },
  ...
});
</script>
<template>
  <lume-bar-chart :data="myBarChartData" :labels="myBarChartLabels" />
  <lume-line-chart :data="myLineChartData" :labels="myLineChartLabels" />
</template>

Composition API

<script setup lang="ts">
import { LumeBarChart, LumeLineChart } from '@adyen/lume';
</script>
<template>
  <lume-bar-chart :data="myBarChartData" :labels="myBarChartLabels" />
  <lume-line-chart :data="myLineChartData" :labels="myLineChartLabels" />
</template>

Using the plugin

You can also import Lume as a Vue plugin that you install in your global Vue app setup:

Vue 2.7

import Vue from 'vue';
import LumePlugin from '@adyen/lume/plugin';

import App from './my-app.vue';

Vue.use(LumePlugin);

const app = new Vue(App).$mount('#root');

Vue 3

import { createApp } from 'vue';
import LumePlugin from '@adyen/lume-vue3/plugin';

import App from './my-app.vue';

const app = createApp(App);

app.use(LumePlugin);

app.mount('#root');