I want to show some country flags with this plugin (https://www.growthbunker.dev/vueflags/)
The folder with flags is in:
.app/
../assets/flags <- HERE
../components
../layouts
.. etc
Plugin settings
// plugins/vueflags.js
import Vue from "vue";
import VueFlags from "@growthbunker/vueflags";
Vue.use(VueFlags, {
// Specify the path of the folder where the flags are stored.
iconPath: 'assets/flags',
});
finally i call the component (french's flag should be rendered)
<gb-flag code="fr" size="small" />
But i get this error
GET http://localhost:3000/assets/flags/fr.svg 404 (Not Found)
I tried with iconPath: '~/assets/flags', same error:
GET http://localhost:3000/~/assets/flags/fr.svg 404 (Not Found)
in nuxt.config.js:
buildModules: [
[
"@nuxtjs/vuetify",
{
/* module options */
},
],
["@nuxtjs/svg"],
],
I created this repo if you want to see an implementation: https://github.com/r9mp/stackoverflow-vueflags
To do this in a short version : put your flags/*.svg in the static directory.
I tried to make it work with the assets/ directory, but it seems a bit tricky for (I think) this reasons: files smaller than 1kb are converted in base64 and so your flags are not copied to /_nuxt/flags/*.svg. From the documentation: "Which means that every file below 1 kB will be inlined as base64 data URL. Otherwise, the image/font will be copied in its corresponding folder (inside the .nuxt directory) with a name containing a version hash for better caching." (https://nuxtjs.org/docs/directory-structure/assets#webpack-assets)
Or maybe wepback just does not understand the vueflags config and so does not import files in build... I'll try to investigate further!