I've been struggling with adding Vuetify to a single component.
this will add the css:
<style scoped lang="scss" src="../../../../../../../node_modules/vuetify/dist/vuetify.css"></style>
But complex components like data tables results in errors.
Would really appreciate some help.
Thanks!
Related
I am trying to access vuetify inside a component I dynamically get from http-vue-loader. I received an error that says vuetify components weren't registered. I then try to import the needed components with a couple different methods with no avail. The methods I tried below didn't work.
require('#/node_modules/vuetify/dist/vuetify.min.css')
------------
<style scoped lang="scss" src="#/node_modules/vuetify/dist/vuetify.css"></style>
"import" syntaxd also doesn't work as well because I am using module.exports = {} instead of export default { } due to http-vue-loader requirements. Does anyone have a solution for this? I am using webpack.
You could try to access them via
Vue.options.components.XXX
Eg Vue.options.components.VIcon
<nav class="left-side">
this is my HTML tag. But on browse, I am getting
<nav v-d-asd0fd class="left-side">
can anybody tell from where does v-d-asd0fd generates? This same thing is also applied in CSS .plese help to find this
When Webpack processes your project it's "Scoping" the CSS. Basically it means that each component's classes are unique to that component and can't fight with other classes. So you could have left-side in different components with different styles.
Vue CSS Scope documentation.
You can change it by removing the word scoped from your Style tag
<style scoped> to <style>
I have a VueJS project that has a base component that can be styled differently depending n server config. Right now I am loading CSS from the server but I was wondering if it is possible to import scoped scss in vuejs dynamically. i.e
<style src="{{style_name_or_path}}" lang="scss" scoped/>
I think it's not possible to load dynamic styles that way. I'd suggest you to use CSS Variables to handle different styles.
I'm working on a big Vue project includes a lot of components and my problem is that am trying to include some scss files to make them work in a specific component or specific rout tree (like call it on parent component so it will affect the child's) any way to apply that i use lang="scss" scoped but unfortunately i found that the code not worked and all styles destroyed and when i remove "Scoped", it works fine but the styles affect another components and i don't want this happened so this is my way to include files
<style lang="scss" scoped>
#import "assets/styles/vl.vendor.scss";
#import "assets/styles/vl.scss";
</style>
I've tried all solutions on stackoverflow but no one worked for me.
Thanks
<style lang="scss" src="assets/styles/vl.vendor.scss" scoped></style>
<style lang="scss" src="assets/styles/vl.scss" scoped></style>
If it still doesn't work, it might be because paths don't resolve correctly. You might have to use src="/assets/styles/..." or src="../assets/styles/...", depending on how paths resolve in your app.
Is there any way to make two different files for HTML and components in Vue.js? Meaning the HTML code is in a different file from the component's code like with Angular.
If your goal isn't to avoid precompilation, you can still use single-file components and split the js and css into different files. They include an example of this structure in the docs.
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>