Upgrade from Version 6 to Version 7

Wondering how to upgrade your Font Awesome Vue component from Version 6 to Version 7 and use all the new fancy family styles? We got you covered.

Before You Get Started

Make sure you have the following in place:

• A project using Vue.js 3 or later
• Access configured to use Font Awesome packages (for Pro/Pro+ Icons)
• An active Pro+ Plan and a Version 7 Kit with Package Installation enabled to use Pro+ icons

1. Remove Older Versions

Remove any entries of vue-fontawesome and fontawesome-svg-core packages from your package.json or yarn.lock file:

  // these need to be removed
  "@fortawesome/vue-fontawesome"
  "@fortawesome/fontawesome-svg-core"

Clean Install Tip

To help ensure a clean install of the new vue-fontawesome and fontawesome-svg-core packages, consider removing any existing entries for @fortawesome/fontawesome-svg-core and @fortawesome/vue-fontawesome from your node_modules directory and your lock file (package-lock.json if using npm, or yarn.lock if using Yarn) before reinstalling.

2. Ready for Reinstallation

Next, head over to the Set Up with Vue guide. Take a moment to decide whether you’d like to install using a Kit Package (recommended) or SVG Icon Packages, and just follow the steps for the option that works best for you.

Optional: Updating Version 6 Pro Icon Packages

All Version 6 icon packages are still compatible with the new vue-fontawesome and fontawesome-svg-core packages.

However, if you’d like to upgrade to the latest Version 7 icon packages, simply follow the same steps as above: remove the existing icon packages from your package.json (and yarn.lock if applicable), then reinstall the Icon Packages.