@lkmx/flare-vue NPM

Flare-Vue

Documentation

Flare-Vue combines the core Flare features with the tooling that are tailored to Vue.js developers.

Flare-Vue is built on top of Vue 3.0.0.

SPA: Vite

Use Vite to quickly scaffold your project.

Prerequisites

Node.js version >= 12.2.0

Create project

With Yarn:

yarn create vite my-vue-app --template vue

Install Flare

Add Flare-Vue to dev dependencies.

With Yarn:

yarn add @lkmx/flare-vue
yarn install

Import into main.js Flare dependencies.

import { createApp } from 'vue'
import App from './App.vue'
import FlareVue from "@lkmx/flare-vue";
import "@lkmx/flare/src/flare.scss";

createApp(App)
    .use(FlareVue)
    .mount('#app');

To avoid any unexpected behavior, delete all styles from .src/App.vue.

Run the proyect:

yarn run dev

Create base layout

Create into src/components directory the following components:

SimpleHeader.vue

<template>
  <header>
    <Columns>
      <Block>
        <h1>Header</h1>
      </Block>
    </Columns>
  </header>
</template>

SimpleFooter.vue

<template>
  <footer>
    <Columns>
      <Block>
        <h1>Footer</h1>
      </Block>
    </Columns>
  </footer>
</template>

BaseLayout.vue

<template>
  <div class="base-layout">
    <simple-header></simple-header>
    <main>
      <slot></slot>
    </main>
    <simple-footer></simple-footer>
  </div>
</template>

<script>
import SimpleHeader from './SimpleHeader.vue';
import SimpleFooter from './SimpleFooter.vue';

export default {
  components: { SimpleHeader, SimpleFooter }
}
</script>

<style scoped>
.base-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
</style>

Create first page

Assembling a minimal structure with Flare requires the use of their core elements, from there, any page could be styled.

<template>
  <base-layout>
    <Page>
      <Columns>
        <Block>
          <h1>Flare it's easy to use</h1>
          <p>Assembling a minimal structure with Flare requires the use of their core elements, from there, any page could be styled.</p>
        </Block>
      </Columns>
    </Page>
  </base-layout>
</template>

<script>
import BaseLayout from './BaseLayout.vue';

export default {
  components: {BaseLayout}
}
</script>

Override Flare CSS variables

Flare includes a list of CSS variables that resolve general aspects of design: traditional space, colors, typography, digital screen, forms, and tables.

To override those variables, create into src/sass the following SCSS files:

_flare-variables.scss

:root {
  --f-h1-text-size: 100px
}

styles.scss

@import "_flare-variables"

Then make global styles.scss by importing it into main.js. Be sure of importing the file after "@lkmx/flare-vue;

import { createApp } from 'vue'
import App from './App.vue'
import FlareVue from "@lkmx/flare-vue";
import "./sass/style.scss"; // Add it after "@lkmx/flare-vue";

createApp(App)
    .use(FlareVue)
    .mount('#app');

To get a full reference of Flare CSS variables, check Flare documentation for styles.

Import Flare Mixins

into vite.config.js add the following configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@lkmx/flare/mixins";
        `
      }
    }
  }
})

SSR/SSG: NuxtJS

Use Nuxt to quickly scaffold your project.

Prerequisites

Node.js 14 or 16.

Create a new project

npx nuxi init nuxt-app

Install Flare

Add Flare-Vue to dev dependencies.

With Yarn:

yarn add @lkmx/flare-vue
yarn install

Import into nuxt.config.ts Flare dependencies and import Flare mixins.

import { defineNuxtConfig } from 'nuxt'
import { resolve } from 'path';

export default defineNuxtConfig({
    target: 'static',
    buildModules: ['@lkmx/flare-vue/nuxt.js'],
    alias: {
        '@': resolve(__dirname, './')
    },
    components: {
        global: true,
        dirs: ['~/components']
    },
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
              @import "@lkmx/flare/mixins";
            `
          }
        }
      }
    }
})

To avoid any unexpected behavior, delete all styles from .src/App.vue.

Run the proyect:

yarn run dev

Create base layout

Create into components directory the following components:

SimpleHeader.vue

<template>
  <header>
    <Columns>
      <Block>
        <h1>Header</h1>
      </Block>
    </Columns>
  </header>
</template>

SimpleFooter.vue

<template>
  <footer>
    <Columns>
      <Block>
        <h1>Footer</h1>
      </Block>
    </Columns>
  </footer>
</template>

BaseLayout.vue

<template>
  <div class="base-layout">
    <simple-header></simple-header>
    <main>
      <slot></slot>
    </main>
    <simple-footer></simple-footer>
  </div>
</template>

<style scoped>
.base-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
</style>

Create first page

Assembling a minimal structure with Flare requires the use of their core elements, from there, any page could be styled.

<template>
  <base-layout>
    <Page>
      <Columns>
        <Block>
          <h1>Flare it's easy to use</h1>
          <p>Assembling a minimal structure with Flare requires the use of their core elements, from there, any page could be styled.</p>
        </Block>
      </Columns>
    </Page>
  </base-layout>
</template>

Override Flare CSS variables

Flare includes a list of CSS variables that resolve general aspects of design: traditional space, colors, typography, digital screen, forms, and tables.

To override those variables, create into assets/scss the following SCSS files:

_flare-variables.scss

:root {
  --f-h1-text-size: 100px
}

styles.scss

@import "_flare-variables"

Then make global styles.scss by importing it into nuxt.config.js in the CSS property.

import { defineNuxtConfig } from 'nuxt'
import { resolve } from 'path';

export default defineNuxtConfig({
    target: 'static',
    buildModules: ['@lkmx/flare-vue/nuxt.js'],
    css: [
      '@/assets/scss/styles.scss'
    ],
    alias: {
        '@': resolve(__dirname, './')
    },
    components: {
        global: true,
        dirs: ['~/components']
    },
    // global SCSS
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
              @import "@lkmx/flare/mixins";
            `
          }
        }
      }
    }
})

To get a full reference of Flare CSS variables, check Flare documentation for styles.