Comments (7)
Hi! That library haven't any eval/inline code. Are you sure that problem with that library?
from vue3-notification.
I believe I have confirmed it's related to how the non-scoped CSS from src/Notifications.vue is being injected into the site by Vite. That CSS is missing when we receive that error (with the restrictive CSP).
I believe it's related to the styleInject
function in the compiled output which is injecting the CSS from that component and also corresponds to the line numbers in my compiled code.
I'm not a CSP expert by any means so please let me know if I'm mistaken or there's any more information I can provide.
from vue3-notification.
Hi there, just bump on the very same thing. so... havent yet dived into the source code but what vite spits out in build it's like pure css in js:
.vue-notification-group {
display: block;
position: fixed;
z-index: 5000;
}
.vue-notification-wrapper {
display: block;
overflow: hidden;
// ... and so on
From what i can tell this is just part of single file component 'Notification.vue' style part. This is where error originates. So should we use some other import method.
Dividing source code so developers can import js and styles seperatly helps with CSP greatly by allowing to place relevant js and css code to respective files on localhost wchich gets loaded with CSP safty policies.
Dont know if theres a way to import your's super nice notifications in such manner. 'Sweet allert' is cinda fat on code size side but for now it's a valid alternative (to whomever stumbless upon this response).
from vue3-notification.
Follow up, this might get bypassed by pushing nonce to the injected style block. This CSP thing is going to burn a lot of money in the industry, really curious if its worth the hussle.
from vue3-notification.
@MichalKrakow I think we can import .css files separately like that:
import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'
import '@kyvg/vue3-notification/dist/style.css'
const app = createApp({...})
app.use(Notifications)
But it would be a breaking change
from vue3-notification.
Stale issue message
from vue3-notification.
Personally I would have no problem with that breaking change - a lot of Vue 3 libraries need CSS to be included like that, I think it might be the default in Vite?
from vue3-notification.
Related Issues (20)
- Notification Start Event HOT 1
- Issue when building app HOT 5
- transition-group invalid html HOT 1
- click event HOT 3
- freeze for inactive user HOT 1
- Install via CDN Help HOT 2
- Two different groups, same position HOT 3
- Tags were removed HOT 4
- Add parameters position and width to API HOT 2
- Notifications not working when provided via vue plugin after version 2.4.1 HOT 2
- Title wrongly rendered from item.timer when item.dangerouslySetInnerHtml is set HOT 1
- Failed to resolve import "@kyvg/vue3-notification" from "src\main.js". Does the file exist? HOT 2
- Add a mention of the possibility of using with nuxt3 HOT 1
- Typescript support for Component props HOT 2
- Custom style was not works well in Production HOT 2
- vue-notification-group的style定位的位置如何自定义?
- Setting Array to the 'classes' prop leads to types mismatch error
- Keep track of amount of duplicate notifications HOT 2
- Previous notifications are not animated to their new position HOT 3
- How to stop the notification from hiding HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-notification.