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?