March 9, 2018

Setting up Font Awesome 5 in Laravel using Vue.js

<p><img src="https://images.ctfassets.net/9b1r03jrrwqy/5qPkK4qmMdTnNy4Q3i8Sj3/dfa0a4c42402a389ba109cf8a4a439b9/1_12mr9an2OpclLyxq-v4xQw.png" alt="" /></p> <p>So you have a Laravel app set up and you want to use the new <a href="https://fontawesome.com/">Font Awesome 5</a> goodness in your Vue.js components. Here’s how you do it.</p> <p>1. First, install the <a href="https://fontawesome.com/how-to-use/js-component-packages">required packages</a>:</p> <pre><code class="language-js">yarn add @fortawesome/fontawesome yarn add @fortawesome/fontawesome-free-solid yarn add @fortawesome/fontawesome-free-brands yarn add @fortawesome/vue-fontawesome</code></pre> <p>We’re going to use the <a href="https://www.npmjs.com/package/@fortawesome/vue-fontawesome">official Vue component</a> to display the Font Awesome icons in this case.</p> <p>2. Next, import the base packages and regidster the component (in “resources/assets/js/app.js”):</p> <pre><code class="language-js">import fontawesome from '@fortawesome/fontawesome'; import FontAwesomeIcon from '@fortawesome/vue-fontawesome'; Vue.component('font-awesome-icon', FontAwesomeIcon);</code></pre> <p>3. (Optional) If you want to import the whole icon set(s), instead of importing each icon manually (still in “resources/assets/js/app.js”):</p> <pre><code class="language-js">import fas from '@fortawesome/fontawesome-free-solid'; import fab from '@fortawesome/fontawesome-free-brands'; fontawesome.library.add(fas, fab);</code></pre> <p>4. Use the new “font-awesome-icon” component:</p> <pre><code class="language-js">&lt;font-awesome-icon icon="spinner" spin v-if="isLoading" /&gt; &lt;font-awesome-icon :icon="['fab', 'digital-ocean']" /&gt;</code></pre> <p>For more instructions on how to use the “font-awesome-icon” component see the <a href="https://github.com/FortAwesome/vue-fontawesome">vue-fontawesome docs</a>.</p>