# Set Up with Vue

Guides and resources for integrating Font Awesome icons into Vue.js projects.

> When using Font Awesome with Vue.js, we recommend using our official `vue-fontawesome` component to make everything work just right.

Make sure you have the following in place:

- A project using [Vue.js 3](https://vuejs.org) or later
- [Access configured](/web/setup/packages.md#1-configure-pro-package-access) to use Font Awesome Pro packages

In this doc, we'll cover the basics of installing core utility packages, icon installation, and installing the Vue component, so that you can make awesome stuff your way!

## 1. Add the Vue Component

First things first. Let's install the `vue-fontawesome` component into your project.

  <h4>
    Vue 3 and Above!
  </h4>

Our `vue-fontawesome` component is developed to officially support Vue.js 3. If you're using an earlier version of
Vue.js, we can't guarantee that all aspects of the component are compatible or will function as expected.

  **npm:**
  **yarn:**

```bash
npm install @fortawesome/vue-fontawesome@latest-3
```

```bash
yarn add @fortawesome/vue-fontawesome@latest-3
```

## 2. Add SVG Core

Next you'll need to use npm or yarn to **install the core package** which is a dependency that includes all the utilities to make the icons work.

  **npm:**
  **yarn:**

```bash
npm install @fortawesome/fontawesome-svg-core
```

```bash
yarn add @fortawesome/fontawesome-svg-core
```

  More about what's in the SVG Core

## 3. Add Icon Packages

Lastly, you'll need to **install the icons** you want to use.

- If you're just using Free icons, [skip ahead to the Free package instructions](#free-icon-packages).
- If you're using Pro+ icons, you'll need to [use a Kit package](#using-a-kit-package-recommended).
- If you're using Pro icons, there are you can use a Kit package or the SVG packages by style.

Pick the method that works for your project, and continue on for details on how to get the icons into your project.

### Using a Kit Package (Recommended)

This is the simplest way to get started if you're using any Pro icons. And it's also the only way to use to use [Pro+ icons](https://fontawesome.com/search?ic=pro-plus-collection) via a package manager.

Before installing your Kit package, **you'll need to complete the following steps**:

1. [Set up a Kit](/web/setup/use-kit.md)
2. [Enable Package Installation for that Kit](/web/setup/use-kit.md#enable-package-installation-for-your-kit)
3. [Configure access to your Kit's package](/web/setup/packages.md#for-kit-packages)

Once you've completed the steps above, install your Kit package:

  **npm:**
  **yarn:**

```bash
npm install @awesome.me/kit-KIT_CODE@latest
```

```bash
yarn add @awesome.me/kit-KIT_CODE@latest
```

### Using SVG Icon Packages (Alternate)

Alternatively, you can install individual Free or Pro icon packages for each style you want to use.

#### Free Icon Packages

[Free icons](https://fontawesome.com/search?ic=free) can be installed without any additional configuration and include the following styles.

  **npm:**
  **yarn:**

```bash
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-brands-svg-icons
```

```bash
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
```

#### Pro Icon Packages

[Pro icons](https://fontawesome.com/search?ic=pro-collection) require an active [Pro Plan](https://fontawesome.com/plans). You'll also need to configure access to these Pro Packages before you can install and use them.

  Configure Pro Package Access

After configuration is complete, you can install any of the individual styles as packages, but **use caution when installing full styles** as they are big packages that include a lot of icons! ([Using a Kit](#using-a-kit-package-recommended) is more effcient.)

Here's how to install the SVG packages for each style:

  **npm:**
  **yarn:**

```bash
npm install @fortawesome/pro-solid-svg-icons
npm install @fortawesome/pro-regular-svg-icons
npm install @fortawesome/pro-light-svg-icons
npm install @fortawesome/pro-thin-svg-icons
npm install @fortawesome/pro-duotone-svg-icons
npm install @fortawesome/duotone-regular-svg-icons
npm install @fortawesome/duotone-light-svg-icons
npm install @fortawesome/duotone-thin-svg-icons
npm install @fortawesome/sharp-solid-svg-icons
npm install @fortawesome/sharp-regular-svg-icons
npm install @fortawesome/sharp-light-svg-icons
npm install @fortawesome/sharp-thin-svg-icons
npm install @fortawesome/sharp-duotone-solid-svg-icons
npm install @fortawesome/sharp-duotone-regular-svg-icons
npm install @fortawesome/sharp-duotone-light-svg-icons
npm install @fortawesome/sharp-duotone-thin-svg-icons
```

```bash
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/duotone-regular-svg-icons
yarn add @fortawesome/duotone-light-svg-icons
yarn add @fortawesome/duotone-thin-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons
yarn add @fortawesome/sharp-duotone-solid-svg-icons
yarn add @fortawesome/sharp-duotone-regular-svg-icons
yarn add @fortawesome/sharp-duotone-light-svg-icons
yarn add @fortawesome/sharp-duotone-thin-svg-icons
```

  <h4>
   Pro+ Icons are only available in Kit Packages!
  </h4>

  <span>
    Along with <a href="https://fontawesome.com/plans?plans=plus">a Pro+ Plan</a>, you'll need to <a       href="/web/setup/use-kit.md#using-kit-packages">install a downloaded Kit package</a
    > to use any of our <a href="https://fontawesome.com/search?ic=pro-plus-collection">Pro+ Icons</a> &mdash; they are not available in any other packages.
  </span>