I am trying to create a custom VueJS components using TailwindCSS and NuxtJS. At times, I want to use the tailwind css #apply directive to style my component. Something like this:
<template>
<div class="card">
...
</div>
</template>
<style>
.card {
#apply bg-grey-200 text-grey-800;
}
</style>
I then want the capability of overriding those styles when I use the component. Something like this:
<Card class="bg-blue-200">...</Card>
Now, this is technically possible -- it just requires organizing the tailing base css file in the right way. Namely, like this:
#tailwind base;
#tailwind components;
.card {
#apply bg-grey-200 text-grey-800;
}
#tailwind utilities;
That is to say, #tailwind utilities needs to come after the custom class names. The problem is that with nuxt it seems to be the opposite -- namely, the custom class names (and their css styles) come after the tailwind utilities.
How can I change this in NuxtJS?
For what it is worth, I am using the #nuxtjs/tailwindcss module with default installation:
buildModules: [
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'#nuxtjs/tailwindcss',
],
Related
I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.
In PHP there's a magic function called file_get_contents('path')
Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.
Check out the #nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.
<template>
<NuxtLogo class="logo" />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<style scoped>
.logo {
fill: #fff;
}
</style>
I'm trying to build a simple mail editor in vue (and vuex). Once everything is edited out of some input, i'd like to inline some scss files into the resulting html, using juice.
If i try to import one css using webpack raw-loader,
import css from '!raw-loader!./../assets/sass/test.css';
then i can pass the css value to juice
let result=juice.inlineContent(html,css)
and then injecting with v-html (see below) in one of my component to render the email.
Whitout using the raw-loader, the css will be applied to everything, beeing imported.
If i try to use the raw-loader with a scss file, it's not compiled - rightly - properly.
import css from '!raw-loader!./../assets/sass/main.scss';
I'm quite new to vue and webpack, so, is there something/somewhere i can dig in to understand a way to preprocess a scss file and then pass it as a string to vue, without applying it as style in vue?
I've also tried to scope some css to a component in which i use a v-html tag (and where the inlined html should go)
<template>
<div v-html="render" />
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["render"]),
},
};
</script>
<style lang="scss" scoped>
table {
border: 1px solid red;
}
</style>
At first in the value (the getters) ther's no table, but when i add it to the component (with the editor) the style it's not rendered at all, as if the component is not re-rendered. That's the reason i decided to inline the css before injecting in the DOM, instead of doing it after some action - like a click on a button.
I've also tried using >>> but with no luck. I know this is not the main question, just a "side quest", but i'm just learning
import css from '!raw-loader!sass-loader!./../assets/sass/main.scss';
It first compile the sass and then import it as a row string... easy peasy
I've added bootstrap and bootstrap-vue to my project via npm. After that, I've added the top two import statements to my App.vue file. After that, it ruins the design of CoreUI's default horizontal nav bar. What am I doing wrong?
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
//Import bootstrap <-- Those two are new
#import '~bootstrap';
#import '~bootstrap-vue';
//Import Main styles for this application
#import 'assets/scss/style';
</style>
As soon as I comment them out again, the design goes back to normal, but my b-table doesn't look right.
CoreUI uses a customized version of Bootstrap V4.x SCSS (basically you are importing two versions of bootstrap v4 CSS).
As long as CoreUI's SCSS defines Bootstrap v4 variables, then do this in your main SCSS file
// Import CoreUI SCSS
// This assumes CoreUI imports bootstrap variables, functions, etc
#import '~coreui';
// Import BootstrapVue SCSS
#import '~bootstrap-vue';
// Add/Import style overrides and custom styles here
This allows BootstrapVue's SCSS to use the variables overrides defined by CoreUI SCSS
I understand that with 'scoped' i can isolate css stylings to a component, so What's the difference between scoped and module in vuejs components? When should I use module over scoped?
According to the docs:
CSS Modules as an alternative for simulated scoped CSS
So, it's an alternative - It's also worth noting that scoped on a parent component means child components can't see the CSS but with module you can access this.$parent.$style.red to gain access to the styling.
It does however have the added advantage that you can then access your CSS from within your code:
<style module>
.red {
color: red;
}
</style>
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>
I have two pages:
search.php that contains a vuejs component called search.vue
person.php that contains another component called person.vue.
In search.vue, I have links to person.php.
How come the styles set in the component search.vue also affect the DOM in person.vue?
The style tag in my search.vue component:
<style>
.row {
background-color: red;
}
</style>
There is nowhere I connect these two views except through the href link to open the person.php page.
Styles defined in the style tag of a Vue single-file-component will be compiled to a singular file, affecting all components.
But, you can specify a scoped attribute on the component's style tag:
<style scoped>
.row {
background-color: red;
}
</style>
From the Documentation:
The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.
Note that the scoped attribute is a Vue feature for single-file-components, different from the general scoped style tag attribute, which has a similar effect but is currently only supported by Firefox.