# Use Vue with...

Step-by-step instructions for setting up and using Font Awesome with Vue.js.

> You can integrate Font Awesome + Vue with other tools and frameworks. Here are some common integrations and how they work.

## Nuxt

Install `@fortawesome/fontawesome-svg-core` and any icon packages you plan to use.

Then install the `vue-fontawesome` component:

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

```bash
npm i --save @fortawesome/vue-fontawesome@latest-3
```

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

Inside your Nuxt project add a `plugins/fontawesome.js` file:

```js
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

// Modify the `nuxt.config.ts` file by adding to the `export default defineNuxtConfig()`
export default defineNuxtConfig({
  css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})
```

Now you can add the icons using the syntax below wherever you want them to appear in your project.

  **String:**
  **Array:**

```html
<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>
```

```html
<template>
  <div>
    <!-- Reminder to bind the icon property with ":" -->
    <font-awesome-icon :icon="['fas', 'user-secret']" />

    <NuxtWelcome />
  </div>
</template>
```