I am getting issues trying to get vue-svg-loader to work. I posted this in the issues part of the plugin, but I am not sure if it is, or just that I have implemented it wrong.
I am pretty new to Vue, so apologies if I am making a really stupid mistake when implementing it.
When I run vue --version it says I am on @vue/cli 4.5.9
This is the code inside of my component:
<template>
<div>
<SampleSvg />
</div>
</template>
<script>
import SampleSvg from "@/assets/sample.svg"
export default {
name: "HelloWorld",
components: {
SampleSvg
},
};
</script>
This is my vue.config.js file:
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
css: {
loaderOptions: {
sass: {
prependData:
`@import "@/assets/scss/globals/_variables.scss";
@import "@/assets/scss/globals/_variables-font-sizes.scss";
@import "@/assets/scss/globals/_colours.scss";
@import "@/assets/scss/globals/_mixins.scss";
`
},
},
},
};
This is my package.json file
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"postcss": "^8.3.6",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"style-resources-loader": "^1.4.1",
"vue-svg-loader": "^0.17.0-beta.2",
"vue-template-compiler": "^2.6.14"
}
}
The error I get is:
[Vue warn]: Component is missing template or render function.
at <SampleSvg>
at <HelloWorld onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
If I open up the sample.svg file, I have this code:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="deeppink" stroke-width="2" fill="#ffe6ee" />
</svg>
I am pretty new to Vue, so apologies if this is down to how I have installed it.