I have my admin-panel and pages for clients in one Vue.js project. Is it possible to use certain css-files only if the current route has "forAdmin" meta?
-
Are you using webpack?Decade Moon– Decade Moon2019-06-21 12:16:50 +00:00Commented Jun 21, 2019 at 12:16
-
@DecadeMoon yesSam Stevenson– Sam Stevenson2019-06-21 12:26:40 +00:00Commented Jun 21, 2019 at 12:26
Add a comment
|
2 Answers
In your mounted() function you can add it like this.
if(someCondition) {
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);
}
2 Comments
Mushfiqur Rahman
I was thinking something like you answered. Thanks
Asef Hossini
How about SCSS files? they need to be compiled
By using style-loader with the useable API, you can dynamically apply and remove a stylesheet in your code.
First you'll need to update your webpack config rules so that stylesheets with the .useable.css extension will be loaded with the useable API:
{
test: /\.css$/,
exclude: /\.useable.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.useable\.css$/,
use: [
'style-loader/useable',
'css-loader'
]
}
Now in your router code file, you can import your stylesheet and .use() and .unuse() it according to your condition:
import style from './admin.useable.css'
const router = new VueRouter(...)
router.afterEach((to, from) => {
for (const route of to.matched) {
if (route.meta.forAdmin) {
style.use()
}
}
for (const route of from.matched) {
if (route.meta.forAdmin) {
style.unuse()
}
}
})
Make sure you balance the total number of .use() and .unuse() calls correctly because a reference count is maintained behind the scenes to figure out when the stylesheet should be applied.
I'm not sure what your setup is, so there might be a better way of doing what you want though.
2 Comments
Jenuel Ganawed
if I would do that in webpack config. Does it works when it is in production? thanks thanks :) I like the idea here, but is this a good way, interchanging themes? thanks thanks
Decade Moon
I don't see a reason why it wouldn't work in production, provided that the production CSS loaders are the same as for development. It won't work if you are doing something different in production, like extracting the CSS to a file.