Storefront UI is installed as a dependency to your project:
```bash
npm install --save @highdigital/vuet
# or
yarn add @highdigital/vuet
```
Once the library is installed, you need to import its **root stylesheet**. It contains _global_ styles and SCSS variables. **Component styles** are automatically imported as part of `.vue` files for each component.
We recommend putting it in your `main.js` or the root component of your application.
```js
import "@highdigital/vuet/styles.scss";
```
That's all! Now you can import any of Storefront UI components like this:
```js
import { SfComponentName } from "@highdigital/vuet";
```
For best extendability and performance we ship Storefront UI as (unpackaged) source code which requires **webpack** in your project to use the library.
Storefront UI is working out of the box with **Nuxt** and **Vue CLI 2 & 3**!
In order to use it in custom projects you need the following webpack loaders: `css-loader@>1.0.1`, `scss-loader`, `sass-loader`, `vue-loader`
## Install custom font
StorefrontUI bases on [Raleway](https://fonts.google.com/specimen/Raleway) and [Roboto](https://fonts.google.com/specimen/Roboto) font styles. To include it in your project,
you need to add the following snippet in the `` of your main `.html` file in a Vue project.
```html
```
This will make sure your font is loaded efficiently and won't affect the page initial load performance.
If you want to use your own font instead, use this [snippet generator](https://googlefonts.3perf.com/) to generate the related font snippet.
For Nuxt.js project, you can add the following to the `head` section of `nuxt.config.js` (or a specific page component).
```js
export default {
head: {
meta: [
{
rel: "preconnect",
href: "https://fonts.gstatic.com/",
crossorigin: "anonymous",
},
{
rel: "preload",
as: "style",
href:
"https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap",
crossorigin: "anonymous",
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap",
media: "print",
onload: "this.media='all'",
},
],
},
};
```
## Using with Nuxt
To use Storefront UI in a Nuxt project you need to include it's transpilation during build process using nuxt.config.js or your alternative webpack config.
For example in Nuxt 2-edge all you have to do is to add `/^@storefront-ui/` to the [transpile.build](https://nuxtjs.org/api/configuration-build/#transpile) array e.g.
```
module.exports = {
build: {
transpile: [/^@storefront-ui/],
},
}
```
Make sure that you already have all required webpack loaders.
## Customization
Storefront UI is very flexible in terms of customization. You can read [here](/setup-customization.md) about its capabilities.