How to build and import Vue-Components which use assets

Viewed 260

I'm trying to create a Vue-Component module which includes a Navbar with a SVG Logo. This needs to be in a seperate package because it will be used in multiple different Vue SPA projects.

I'm currently using Akryum/vue-share-components and setup the following:

src/logo.svg is a simple SVG Logo
src/components/Test.vue

<template>
  <div class="test">
    <h1>Hello test_plugin!</h1>
    <img src="../logo.svg">
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {}
  },
}
</script>

And I also added the url-loader in webpack.base.conf

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'img/[name].[hash:7].[ext]',
    },
  },

The build output also handles the SVG:

img/logo.e25ad72.svg   12.8 kB          [emitted]  
test_plugin.common.js     23 kB       0  [emitted]  main

When using a new project, created with vue-templates/webpack, and linked to the plugin, I'm unable to use the component because the SVG won't be available:

<template>
  <div id="app">
    <test></test>
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'
import { Test } from 'test_plugin';

export default {
  name: 'app',
  components: {
    Hello,
    Test,
  }
}
</script>

It compiles, but the browser won't find http://localhost:8080/img/logo.e25ad72.svg. Is there any way to support assets included by packaged vue-components?

0 Answers
Related