Vue

Demo

To use BlueprintUI in Vue be sure to follow the getting started guide and installation. Once installed in your Vue app instantiation adjust the compiler options to enable BlueprintUI components.

const { createApp } = require('vue');
import App from "./App.vue";

const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('bp-');
app.mount("#app");

Once enabled components can be imported into Vue SFC files.

<!-- app.vue -->
<template>
  <div bp-layout="block gap:md">
    <bp-button @click="showAlert = !showAlert">hello there</bp-button>
    <bp-alert-group status="success" :hidden="!showAlert">
      <bp-alert closable @close="showAlert = false">General Kenobi...</bp-alert>
    </bp-alert-group>
  </div>
</template>

<script>
import '@blueprintui/components/include/alert.js';
import '@blueprintui/components/include/button.js';

export default {
  name: 'App',
  data: () => ({
    showAlert: false
  }),
}
</script>