Installation

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

Styles

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

CSS (global)

// 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)

// 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)

<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style src="@adyen/lume/styles"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>

Sass (SFC)

<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)

<template>...</template>

<script>
...
</script>

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