Floor plan suggestions

General
51

Ok, so I've been banging my head against the wall with this one for a while now.

First thing is I don't get why the syntax on almost every website, including this one, differs to the syntax that I end up having to write in the index.js file.

Secondly, no matter what combinations I try I cannot get fa icons to appear on my webpage.

I am trying the "lite" method of only loading the icons that I need. Maybe that's my first mistake.
I have installed all the packages recommended:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons 
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome

I have tried to register the components in the index.js file and I can get to the point of no errors, but the icons don't appear on my web page.

I'd love to paste my code, but I've tried so many combinations that don't work that I think I am fundamentally doing it incorrectly. I also suspect that the end solution is very easy.

Ok, so here's one attempt that doesn't throw up immediate errors that I deduced from another post on thsi forum (Uibuilder - extra vue enhancements), perhaps incorrectly

Vue.component({FontAwesomeIcon : 'font-awesome-icon'}),

But I don't know how to then add the icon:

library.add(faCoffee)

I assume I don't need to import anything, but maybe I got that bit wrong as well:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Can anyone help please?

EDIT: I forgot to paste the error I am getting when I refresh the web page:

image
image1064×62 3.37 KB

This is the HTML:

` <template>
            <div id="app">
              <h1>Getting Started with Vue.js and Font Awesome</h1>
              <p>Have a cup of coffee: <font-awesome-icon icon="fa-coffee" /></p>
            </div>
          </template>
`

EDIT2: So I started reading this post:

And added the following code into my var app1 = new Vue:

    components: {
        FontAwesomeIcon: 'font-awesome-icon',
    },

And now I get this error:
image