-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide VueJS example #11
Comments
Hey, I have never worked with VueJS but from what I can tell this should work out of the box since it's only tied to Webpack 🙂 Could you please show me your Webpack config? And package.json |
That's what I guessed too, but seems like in the case of VueJS, a particular configuration might be necessary. Here is the package.json and the webpack config I use for the project. |
Ah I see! Could you please install |
Okay, I succeeded to make it work by adding Also, I used the following Webpack configuration:
I will make a clean repository tomorrow with an example config, some doc, and open a PR to add it to the readme for future users. |
So glad to hear! Thanks for this, let me know when your PR is ready 😄 |
I continued to play with it but i could not make it work properly. Unfortunately, my experience with webpack is quite limited and despite learning a lot from this experiment, I couldn't make it work with VueJS, which seems to be more tricky than react due to its default webpack configuration. |
Ah, sorry to hear... Configuring loaders with tools that use Webpack and allow for a certain level of configuration is indeed sometimes tricky (if there is a default file loader you need to remove it for example, ...). For example, to integrate this loader with Gatsby I've had to do this:
If I can help you further, please let me know! |
I succeed to make it work as expected with VueJS and made a PR (#13) to link to the example repository. I thought adding an external link might avoid you the need of testing the example/maintaining it in the future. Also, during my work, I was wondering if there was anyway to setup the loader so it does in-place replacement of the link? For example, the following code: <img src="logo.png" /> would have its srcset attribute automatically added to obtain: <img src="logo.[hash].png" srcset="logo.[hash].webp 1x, logo.[hash].png 1x" /> The name is already automatically changed to include the hash with the default setup of VueJS (which uses file-loader), so I guess it would be possible to do it too? |
Hey, I'm happy you managed to make it work! Have you looked at the example React component? I think it might be what you're looking for :) |
It would be awesome if a VueJS configuration example was made available.
I am struggling to make it work in a VueJS project: I obtain a build error (TypeError) when building the project:
Here is the fresh VueJS project I used to test with only ideal-image-loader added: https://github.com/GauthierPLM/test-brigad-ideal-image-loader
I am not really proficient with Webpack so I probably missed something...?
PS: your loader is the most complete I found matching a workflow integrating Zeplin 👍 Really hope to make it work!
The text was updated successfully, but these errors were encountered: