Closed SergkeiM closed 9 months ago
We should add a way to pass arbitrary options to vue-loader
. I'll open a PR for that this evening
Heh I already did this for Mix v6.
mix.vue({
options: {
shadowMode: true,
},
})
Hi @thecrypticace, thank you for reply.
I tried Mix v6, doesn't work
Hi @thecrypticace
Laravel Mix Version: v6.0.0-beta.14
vue-loader Version: 15.9.5
Mix Config
const mix = require('laravel-mix');
mix.js('src/index.js', 'dist/webcomponents.js').vue({
version: 2,
options: {
shadowMode: true
}
}).setPublicPath('dist');
Same compontent as above, output:
Do I miss something?
That seems right to me. I'll take another look.
Hi @thecrypticace
I think is something to do with vue-style-loader
based on: this and this this
I tried to override mix config for .scss
with:
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
{
loader: 'vue-style-loader',
options: {
shadowMode: true
}
},
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
precision: 8,
outputStyle: 'expanded',
indentedSyntax: true
}
}
}
]
}
]
}
But no success.
I could see that shadow mode is enable for both vue-laoder
and vue-style-loader
but is still appends to head... :(
Update: Tried to do it directly from vue-cli
works fine.
Hi @thecrypticace
Closing this, downgrading css-loader
to v3 fixes this issue see: PR
I was playing around with this a while ago myself and couldn't get shadowMode to work properly under any circumstance. Additionally we've had some problems with vue-style-loader necessitating reverting that change.
Hi @thecrypticace I used this with Vue Webcomponents and works fine: https://github.com/vuejs/vue-web-component-wrapper
Hi @thecrypticace
With latest release I see you have added, option to choose between vue-style-loader
and style-loader
v6.0.25
But, by default shadow mode in vue-style-loader
is disabled, can we add a posibility to pass options to vue-style-loader
.vue({
version: 2,
runtimeOnly: true,
useVueStyleLoader: true,
vueStyleLoaderOptions: {
shadowMode: true
//or other vue-style-loader options
// Like manualInject or ssrId and etc
}
})
v6.0.0-beta.14
node -v
):12.14.1
npm -v
):6.13.4
Windows 10
Description:
Hi, I'm trying to implement webcomponents using Vue.
And using SFC, to inject CSS/SCSS into shadow DOM, Based on this comment, Enabling
shadowMode: true
invue-loader
should append the styles intothis.$root.shadowRoot
insted of<head>
.Steps To Reproduce:
My Mix config
Index.js
Test.vue
But all styles are still shown in
<head>
, tried usinglaravel-mix v6
, but still the same, any suggestion?