@lkmx/flare-vue v0.1.31
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.
Development
Pending
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago