'Include fonts and assets when building a Vue component library

Right now I'm using vue-cli-service build --target lib --name myLib [entry] to build Vue as a component library to use in other projects.

However, it only generates four files which are:

dist/myLib.umd.min.js 
dist/myLib.umd.js
dist/myLib.common.js
dist/myLib.css

It doesn't have any assets/ folder which I store fonts in the dist/ folder.

What parameters or configurations do I have to make to be able to embed the fonts with the library?



Solution 1:[1]

Im having the same issue. It would be helpful if i get some insight on how to bundle libary with fonts and images

Solution 2:[2]

Well, what is working for me is setting the following config to my 'vue.config.js'file:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: './',
  css: {
    extract: false,
    sourceMap: true,
  }
})

That makes the CSS (with the @font-face) go to the 'XXXX.common.js', in my case, the font file was exported to '/dist/fonts'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anandkumar
Solution 2 Abner Guimaraes