Vue3 Support #136
Comments
|
@milewski I just released a new beta version with Vue 3 support, please check it out |
|
@visualfanatic Does the webpack config in the readMe file work for vue-svg-loader@beta ? Because svg doesn't load when I upgraded to beta in my vue-3 app I had set it up using webpack 4 |
|
@sritirunagari could you share your webpack config? |
|
@visualfanatic Thanks for getting back. Webpack config I used was : It's exactly the same config you mentioned in your readMe file. In fact, I have also something else, I had taken a dump of this : vue-next-webpack and added the config, it still didn't pick up svg unfortunately. Please let me know if i am not clear. |
|
@sritirunagari could you provide a full configuration file? This snippet looks fine 🤔 |
|
@visualfanatic Here, it is const path = require('path')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = (env = {}) => ({
mode: env.prod ? 'production' : 'development',
devtool: env.prod ? 'source-map' : 'eval-cheap-module-source-map',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/'
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.png$/,
use: {
loader: 'url-loader',
options: { limit: 8192 }
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: !env.prod }
},
'css-loader'
]
},
{
test: /\.svg$/,
use: [
'vue-loader',
'vue-svg-loader'
],
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false'
})
],
devServer: {
inline: true,
hot: true,
stats: 'minimal',
contentBase: __dirname,
overlay: true
}
}) |
|
@sritirunagari that's weird, are you sure you are using the beta version? |
|
@visualfanatic , here is the dependencies overview from package.json
|
|
@sritirunagari this might be actual bug in the loader, not in your config, I will take a look at it later today. |
|
@visualfanatic `Module build failed (from ./node_modules/vue-svg-loader/index.js):
then I had installed svgo dependency, to see if it picks up, but no luck. |
|
@visualfanatic Sure, thank you, I will wait for your update |
|
@visualfanatic I have an update. I guess it would have been some mistake in my project settings. I am using a lerna mono-repo and apparently one of the packages didn't compile as expected. I am able to load svgs now. However, I still see one more issue, the dependency throws error if I build my app without 'svgo' dependency as mentioned in my previous comment. So you might want to add this to your beta version to support webpack. There is one more problem I came across when setting up jest to transform svgs as per your link ( click here ). Now that, we don't use template-compiler, what would you suggest from where to pull vueJest() from ? Thanks in advance. |
|
@sritirunagari Sorry for the delay, I finally found a bit of time to push a new release. I checked it using the |
|
@visualfanatic Sorry, I had missed to reply. Could you mention which issue have you fixed in your new release ? I have report two minor ones.
|
|
@sritirunagari I fixed the missing |
|
I am also trying to use this in Vue3 which since a few weeks is officially released. Do we still need to use the vue-loader-v16 or is there an update. EDIT: I just realized the documented approach also doesn't work for me (the file is there): |
|
@sritirunagari could you share your working configuration? I was not able to get it to work here. |
|
Using Typescript it doesn't work at all. Nvmd its fixable with this. In Vue3 you need to define the Svg definition file like this |
|
@visualfanatic Anything we can do to help get a stable version with Vue 3 support out? |
Specifically for people running across this, you will want to add this to an Add this to the top of your TypeScript file which is importing the SVGs: /* eslint-disable @typescript-eslint/triple-slash-reference */
/// <reference path="../path/to/your/index.d.ts"/>Or (better), update your project root's {
"include": [
"src/**/*.d.ts",
],
}I really hope this library can include these type definitions by default! This wasted about six hours of my life split between a few infuriating hours a month ago and again now upon revisiting it. Very glad I was able to finally solve this though. |
|
Is there an ETA for the stable release? |
|
I also can't quite get this to work, but I'm getting an error I'm not seeing anyone else having: Any ideas? This is my new module.exports = {
// ...
chainWebpack: (config) => {
config.resolve.alias.set("vue", "@vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
};
});
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("vue-loader")
.loader("vue-loader")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader");
},
}; |
|
@visualfanatic I have most everything working, except that I can no longer style any SVG files within my component using Vue 3. I don't know what changed between Vue 2 and Vue 3, but here is my very simple component: <template>
<div>
<CameraIcon />
</div>
</template>
<script>
import CameraIcon from './camera.svg'
export default {
components: {
CameraIcon
}
}
</script>
<style lang='scss' scoped>
svg {
path {
transition: all .2s ease-in-out;
fill: #c3c3c3;
}
&:hover {
path {
fill: black;
}
}
}
</style>None of the styling works unless I remove Also, I am using Vue CLI and have the following config: chainWebpack: config => {
config.resolve.alias.set('vue', '@vue/compat');
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 3
}
}
}
});
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
}
}; |
|
Just in case it helps anyone figure this out, I was able to get it working in my project, here is the repo: https://github.com/GraphiteEditor/Graphite and here is the |
|
@Keavon I took a look and I also have it working, but my main problem with the latest, is that I have to remove Does anyone have any idea what changed between Vue 2 and Vue 3 that requires me to remove |
That is the way |
|
i getting the following error after update this ocurrers in all my svg files i'm using webpack |
You've forgotten to use 'vue-loader-v16' instead of 'vue-loader' |
|
Thank for the hint, This is my current module.exports = {
// ...
chainWebpack: (config) => {
config.resolve.alias.set("vue", "@vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
};
});
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("vue-loader-16")
.loader("vue-loader-16")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader");
},
};The file path seems correct (and hasn't changed since the working Vue2 setup): $ ag xmas.svg
src/components/Modal.vue
18:import XMas from "../assets/xmas.svg";
$ fd xmas.svg
src/assets/xmas.svgI think my // From https://vue-svg-loader.js.org/faq.html#how-to-use-this-loader-with-typescript
// Required to avoid TS complaining about the SVGs not being proper modules.
declare module "*.svg" {
import Vue, { VueConstructor } from "vue";
const content: VueConstructor<Vue>;
export default content;
}Any ideas what's up here? |
This Jest issue seem to still be a problem - the solution described in the docs simply doesnt work. Its very easy to reproduce, as if you try to run a test using a svg as a component in any project it will fail. |
+1 After |
|
I'm getting this error, yesterday all was working good: error in ./src/assets/img/wysiwyg/strike.svg Module parse failed: Unexpected token (1:0)
|
|
Same error as @ajerez . Building my project through webpack was working a few days ago but stopped working today due to issues within the SVGs. Module parse failed: Unexpected token (1:0)
You may need an additional loader to handle the result of these loaders. |
|
I have managed to solve the issue quoted by @ajerez and myself above by upgrading vue-loader to version 16.5.0. Below are the versions that I am currently using with Vue 3.1.4 - build was successful. My webpack build for svg files is as per below (specific to my project): Hope this helps! |
|
I tried to upgrade I know that it works correctly with version |
have you found a solution? |
|
what happened ? in ./src/assets/404.svg?component Module parse failed: Unexpected token (1:0)
vue.config.js }; |
Is there a solution yet? |
|
Tested this and works https://www.npmjs.com/package/vue-cli-plugin-svg-vue3
*** Some issues with chrome to render with img tag src so at the end I'm using the inline option. |
|
Is there any progress in moving this from beta to rc? |
|
This might not be the best advice for everyone but it was helpful to me and possibly will for others: if you don't care about minifying your SVG code, you don't need to use module.exports = function VueSvgLoader(svg) {
this.cacheable();
return `<template>${svg}</template>`;
};(I put this in Then just import it in your // Change the loaders used by the Vue compilation process
config.module
// Replace Vue's existing base loader by first clearing it
// https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule
.rule("svg")
.uses.clear()
.end()
// Add vue-loader as a loader for Vue single-file components
// https://www.npmjs.com/package/vue-loader
.use("vue-loader")
.loader("vue-loader")
.end()
// Add vue-svg-loader as a loader for importing .svg files into Vue single-file components
// Located in ./vue-svg-loader.js
.use("./vue-svg-loader")
.loader("./vue-svg-loader")
.end();This also saves like 80 megabytes worth of junk in |
|
@Keavon Are you using vue cli v5? |
My attempt to upgrade has not been successful yet. |
So this updated fix is for Vue 3. In the updated configuration docs, it shows for Nuxt 1 & 2, but not 3. Would you be able to add supported config for Nuxt 3 as well? |
|
Oh guys.... I spent a lot of hours to find work solution 😅 const FILE_RE = /\.(vue|js|ts|svg)$/
// Use vue-cli's default rule for svg in non .vue .js .ts files
config.module.rule('svg').issuer(file => !FILE_RE.test(file));
// Use our loader to handle svg imported by other files
config.module
.rule('svg-component')
.test(/\.svg$/)
// .issuer(file => FILE_RE.test(file))
.use('vue-loader')
.loader('vue-loader')
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader"); |
|
In my case - VueCli builds library ( solved that by removing full |
You can make it recognize the element as declare module '*.svg' {
import type { SVGAttributes, DefineComponent } from 'vue';
const content: DefineComponent<SVGAttributes>;
export default content;
} |
and others
I think the dependency on template-compiler breaks with vue-3, is there any temporarily workaround?
The text was updated successfully, but these errors were encountered: