v5 SVG causes double markup and JS error in Vue app

[mariusa]

Here's a strange issue with Font Awesome 5 icons (SVG version) in a Vue app. I've replicated this in a new minimal Vue app:

https://www.dropbox.com/s/9xf0bim26lzsp7x/hello-world.tgz?dl=0

which can be run locally with `npm run serve' and accessed at http://localhost:8080/#/detail/123

A view has a font awesome icon and some markup:

<template>
    <div>

        <div class="text-center">
            item.id {{item.id}}
            <p v-if="item.status == 'New'">Please confirm your appointment:</p>
            <!-- class="fas fa-user"  not useful. Sometimes icons are mess up. -->
            <p>{{item.practitioner_name}}</p>

            <p><i class="fas fa-map-marked-alt"></i> <a
                    :href="item.address_map_href"
                    target="_blank"
                >{{item.address.address1}} </a>
                <span v-if="item.address.address2">; </span>
                {{item.address.address2}}
            </p>

            <p>
                {{item.day}}<br>
            </p>

            <div v-if="item.status == 'New'">
                <button
                    variant="primary"
                    @click="itemConfirm()"
                    class="w-md"
                ><i class="fas fa-check"></i> Confirm</button>
                <br><br>

            </div>

        </div>

    </div>
</template>

<script>

export default {
    props: ['id'],
    components: {
    },
    data: () => ({
        item: {
            address: {} //avoid error on render
        }
    }),

    async mounted() {
        // eslint-disable-next-line no-console
        console.log("sadf")
        if (this.id && this.id != '0') {

            this.item = {
                "id": "mkt7y3v0m5vupnal",
                "practitioner_id": "yyie5csyc0y1lwcg",
                "day": "2019-11-08",
                "start_time": "16:00",
                "end_time": "16:45",
                "status": "New",
                "practitioner_name": "Dr",
                address: {}
            }
        }

    },

    methods: {

        itemConfirm() {

            this.item.status = 'Confirmed'

        },

    }

}

</script>

The result after clicking Confirm:

Observations

• The svg markup appears twice in DOM

• Font Awesome js is loaded in index.html with <script defer src="https://kit.fontawesome.com/c6f7021dab.js" crossorigin="anonymous"></script>

• Removing Font Awesome solves both the duplicate markup display and JS error

What would be the solution to continue using Font Awesome?

JS error:

vue.esm.js?a026:628 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

itemConfirm @ RecordDetail.vue?f97b:145

click @ RecordDetail.vue?e784:50

invokeWithErrorHandling @ vue.esm.js?a026:1863

invoker @ vue.esm.js?a026:2184

original._wrapper @ vue.esm.js?a026:7559

vue.esm.js?a026:1897 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

There's no nextTick() function in my code. I do NOT use v-for (saw this as another cause).

Version and implementation Version: 5 Browser and version: Chrome 78

• [x] SVG with JS
• [ ] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

Bug report checklist

• [x] I have filled out as much of the above information as I can
• [x] I have included a test case because my odds go way up that the team can fix this when I do
• [x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Are you using our vue.js component? I think you need that

Ref: https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

[mariusa]

I see, thanks. Will stick to CSS version. It would be awesome to mention this in Help me choose at https://fontawesome.com/kits Would have saved me hours.

[tagliala]

Hi @mariusa , sorry for that

Let's see if there is any chance to improve the documentation and double check that I'm not wrong

@robmadole are javascript kits compatible with Vue.js?

[robmadole]

We created the vue-fontawesome component for use with Vue. That will give you the best experience. You can certainly use the Webfonts version of Font Awesome but you’ll miss out on the sub setting that the vue-fontawesome component provides.

[lucadealfaro]

Using font awesome js (version 5) is buggy in vue, and is in general more difficult to debug. Going back to version 4.7. The great thing about font awesome used to be its simplicity, but v5 with Vue is mindboggling for me.

[robmadole]

@lucadealfaro You can use the Webfonts version and it works exactly like the older version 4.7. I suggest that you download the v5 package at https://fontawesome.com/download. You'll probably have a much easier time.

[lucadealfaro]

You mean downloading the "Free for Web" version from https://fontawesome.com/download ? That works in CSS only? Where are the "webfonts" documented?

I am teaching a large beginner class in web, and what I like of 4.7 is that the HTML elements are not modified, so that when someone inserts an for instance, the element is still there and not replaced by a complex SVG. It makes debugging for my beginner students much easier. Is that true also of the webfonts?

Also, if the regular font is free, but the solid font is not, does this mean that the free fonts do not contain outline and filled versions of icons like star, thumbs, etc? I use them in my class to teach how to do things like star ratings, etc.

Your help is much appreciated.

[tagliala]

Hi,

I will try to answer

You mean downloading the "Free for Web" version from https://fontawesome.com/download ?

The "Free for web" zip files contains both CSS and SVG versions. Take a look at the package contents. For CSS, you need css and webfonts folder

Is that true also of the webfonts?

Yes, it is. FA5 CSS works just like 4.7.0

Where are the "webfonts" documented?

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

If a functionality is reserved to SVG Framework, you will see a warning (ex: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)

Also, if the regular font is free, but the solid font is not, does this mean that the free fonts do not contain outline and filled versions of icons like star, thumbs, etc?

All solid icons are free, and some regular icons are free. Star and thumbs are both available in the free package. Also, if an outlined icon is present in FA 4.7, you will find it in FA5 Free

I use them in my class to teach how to do things like star ratings, etc.

If you are implementing star ratings via css pseudo-elements, take a look here: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Hope it helps