vue-webp | a vue.js webp directive support | Frontend Plugin library

I wanna have code coverage on frontend with cypress. Currently cypress recommends istanbul for coverage. Unfortunately I can't use it in pair of the stack below:

• vue-property-decorator
• cypress
• istanbul code coverage.
• typescript.

Because of: - I didn't find a way to make istanbul work with ts-loader, because istanbul-intementer-loader uses babel under the hood - babel-loader doesn't support decorators in the same way that typescript does, that breaks vue-property-decorator. Using vue in typescript w/o vue-property-decorator is not that neat...

Here're some useful link:

• example for repo with babel coverage
• official guide
• official github repo for typescript users
• cypress issue

Here's the repo and quick overview:

• git clone https://github.com/akoidan/vue-webpack-typescript && cd vue-webpack-typescript
• yarn install
• yarn run build
• yarn run e2e

You can also check out the babel branch on the repo above, to see example with babel instead of ts-loader

Here's the example of setup with ts-loader:

package.json:

Google insight told me to convert my JPG images to WebP. It reduced wieght of every image by a half but the issue is that Safari (probably worst browser even edge better please don't use it so it will die) on Mac doesn't display webP.

I've added this script to my app which I believe is polyfill but it didn't help. Also it's written there to download both files but webpjs-0.0.2.swf is broken link. Is there some working polyfill?

Most of images are served as background images often as binded inline styles. So for example this polyfill won't work because css support is plan for a future.

In turn this have lack of documentation around css/inline-style and also need some work to be done to replace path in every image in every component.

If you have mac and safari - live demo

I'm trying to create a simple web app with material-components-vue and vue-cli with webpack, however, I found out that I cannot import stylesheets from node_modules without a preceding ~.

I have tried several webpack/vue-cli configs, and ended up with a config in vue.config.js passing loader options.

My vue.config.js looks like this:

I've been stuck on this problem for days. I've tried everything I can find but still can't get it worked.

In app.js When I set like below, it works:

I use the dynamic source for vue-webpack images in nuxt :src="require('path/to/image' + dynamic.variable)" in my project navbar. If the users substitute their image through a form which refetches their information and deletes their previous image I get a webpack error module (img) not found (it does not find the new one): is there a way to solve this, like wait for webpack HRM to finish?

I tried setting up a setTimeout() of one second before user re-fetch and it works, but I don't like a random waiting, I'd use a promise or a sync dynamic, the point is webpack hot reload is not controlled by my functions.. I also tried with setting the dynamic path as a computed: but it doesn't fix.

My image tag:

I am working on webpack 4.29.3 and vue.js 2.6.3. I just tried to create a simple hello world project with vue js and webpack. I expected index.html to be rendered well. I get the error, though: SyntaxError: invalid range in character class which is really weird because I don't do anything with regular expression. that's why I am not sure which part to fix it.

vue-first.js:

I'm trying to follow https://alligator.io/vuejs/demistifying-vue-webpack/ . Based on this I tried:

I have the following code:

src/store/modules/outcome-analyzer/outcome-analyzer.js

I never really thought about it until I switched from webpack to brunch where I saw the following lines in index.html: