Installation

Installing Lume

To install Lume, run the following command:

Vue 2.7+

Copy code
npm install @adyen/lume

Vue 3

Copy code
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:

Copy code
<script lang="ts">
import { defineComponent } from 'vue';
import { LumeBarChart, LumeLineChart } from '@adyen/lume';
 
export default defineComponent({
  components: { LumeBarChart, LumeLineChart },
  ...
});
</script>

Copy code
<template>
  <lume-bar-chart :data="myBarChartData" :labels="myBarChartLabels" />
  <lume-line-chart :data="myLineChartData" :labels="myLineChartLabels" />
</template>

Composition API

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

Copy code
<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

Copy code
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

Copy code
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');

Styles

For Lume to render as intended, you also need to import its styles.

CSS (global)

Copy code
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';
 
// Main styles
import '@adyen/lume/styles';
// (Optional) Lume font
import '@adyen/lume/font';
 
const app = new Vue(App).$mount('#root');

Sass (global)

Copy code
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';
 
// Main styles
import '@adyen/lume/scss';
// (Optional) Lume font
import '@adyen/lume/font';
 
const app = new Vue(App).$mount('#root');

CSS (SFC)

Copy code
<template>...</template>
 
<script>
...
</script>
 
<!-- Main styles -->
<style src="@adyen/lume/styles"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>

Sass (SFC)

Copy code
<template>...</template>
 
<script>
...
</script>
 
<!-- Main styles -->
<style lang="scss" src="@adyen/lume/scss"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>

Sass (with overrides)

Copy code
<template>...</template>
 
<script>
...
</script>
 
<!-- Main styles -->
<style lang="scss">
@use '@adyen/lume/scss' with (
    $lume-font-family: 'Times New Roman'
);
</style>