Fundamental Vue

Description

The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles.

Fundamental Library for Vue is behind the latest Fundamental Library Styles and is open for contributors.

API Reference

See Component Documentation for examples and API details.

Requirements

To download and use Fundamental Vue library, you first need to install the node package manager. https://www.npmjs.com/get-npm

Some prior knowledge of Vue is required for using this library.

Getting started

Fundamental Vue in 5 Minutes or less

A minimal working Fundamental Vue app can look like following. You can just copy that in to a single html file and then open it in a browser.

<!DOCTYPE html>
<html>

<head>
    <!-- Import fiori-fundamentals stylesheet, vue.js and FundamentalVue -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.js"></script>
</head>

<body>
    <!-- Create Vue app with a single fundamental vue popover element -->
    <div id="app">
        <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
            <h1 v-fd-margin:large>
                🚀 Hello Fundamental Vue 🚀
            </h1>
            <template #control="{toggle}">
                <fd-button @click="toggle">Show Popover</fd-button>
            </template>
        </fd-popover>
    </div>
    <script>new Vue({ el: '#app' })</script>
</body>

</html>

When using Fundamental Vue via a <script>-tag you don't have to install it manually by calling Vue.use(FundamentalVue). This is done for you automatically. You can disable the automatic installation by setting window.__FD_AUTO_INSTALL_DISABLED_KEY__ to true early on.

If you are targeting IE 11 you have to include the IE-compatible build of Fiori Fundamentals:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals-ie11.min.css">

How to install Fundamental Vue via NPM is described below.

Install

To download and use this library, you first need to install the node package manager - npm.

Install Fundamental Vue

NPM
```
$ npm install --save fundamental-vue
```
After installing, you will need to import fundamental-vue and make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project.

In your project's main.js:
```
import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);
// …
```
Fundamental Vue does not include the Fundamental Library Styles which is required for styling.
Install Fundamental Library Styles

The quickest way to get Fundamental Library Styles styling for your components is to include the compiled and minified Fundamental Library Styles with the following CDN link in your public index.html file:
```
<link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fundamental-styles.min.css">
```
However, installing the Fundamental Library Styles with npm (recommended) will give you the flexibility to use individual components and enable advanced customisation options. In this case, you do not need the CDN link as this method uses the SASS/SCSS source.

To install the Fundamental Library Styles source:
```
$ npm install --save fundamental-styles
```
The following assumes the usage of a module bundler such as webpack. To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - sass-loader and node-sass. To install these packages as development dependencies:
```
$ npm install sass-loader node-sass --save-dev
```
Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a known issue.

You can now use the Documentation to browse the components currently available with Fundamental Vue.

To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessary:
```
<fd-alert dismissible>
    Happy building! 🚀
</fd-alert>
```

Versioning

The fundamental-vue library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the main branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).