I'm using Tailwind CSS, Vue JS, and Inertia for my practice project. I'm trying to add some other classes when the specific link is visited. But the problem is updated class is not working.
I have tried the below code.
<Link :href="route('profile.index')"
class="link-btn"
:class="{'link-btn-active' :route('profile.index')}">
Profiles
</Link>
This is what I have written in Tailwind CSS
.link-btn{
#apply pl-[5px] bg-red-500 opacity-60;
}
.link-btn-active{
#apply pl-[10px] bg-green-500 opacity-100;
}
Try it like this :
<template>
<Link :href="route('profile.index')"
class="link-btn"
:class="{'link-btn-active' : isActive('profile.index')}">
Profiles
</Link>
</template>
<script>
export default {
computed: {
isActive(routeName) {
return this.$route.name === routeName
}
}
}
</script>
Related
I know this isn't the best time to use vuetify 3 but, i did. Hoping everything goes well until i found out that a lot of components are still missing.
Now, I am having a problem importing a lazy component using defineAsyncComponent.
my DOM doesn't seem to recognize async components.
I don't know if it is a vuetify error but my project is made out of vuetify so I was suspecting it was the problem.
Below is my code in dashboardACtionsLayout.vue
<template>
<div>
<div class="d-flex mb-3 mt-2">
<add-customer-modal />
</div>
</div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
components: {
addCustomerModal: defineAsyncComponent(() =>
import("#/components/customer/addCustomerModal.vue")
);
}
</script>
<style lang="scss" scoped></style>
and this is the error i am getting in my console:
Use defineAsyncComponent like below.
<template>
<div>
<div class="d-flex mb-3 mt-2">
<add-customer-modal />
</div>
</div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
const AddCustomerModal = defineAsyncComponent(() =>
import('#/components/customer/addCustomerModal.vue')
)
</script>
<style lang="scss" scoped></style>
note:
The name of your component is addCustomerModal, while vue's recommendation is that the beginning of all words should be capitalized, like AddCustomerModal.
It is now fixed as of #m kh answer. But when I try to register two components using this code; `
const AddCustomerModal = defineAsyncComponent(() =>
import("#/components/customer/addCustomerModal.vue")
);
const CustomersModal = defineAsyncComponent(() => {
import("#/components/customer/customersModal.vue");
});
` I will get an error like this
I am using Astro Tailwind integration, and I am trying to add some tailwind classes to MainLayout.astro which resides in layouts directory as follows
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<main class="mx-20 mb-20 md:mb-28 xl:container xl:mx-auto">
<slot />
</main>
</body>
</html>
But styles are not getting applied to the <main> tag (according to browser dev tools inspection), but styles to the rest of the pages are getting applied.
What I have tried?
Restarting the dev server
Edit:
tailwind.config.cjs look like below
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
...
};
Edit 2:
astro.config.mjs
import { defineConfig } from "astro/config";
import react from "#astrojs/react";
import image from "#astrojs/image";
import tailwind from "#astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [
react(),
tailwind(),
image({
serviceEntryPoint: "#astrojs/image/sharp",
}),
],
});
Example:
var vm = new Vue({
el: '#app',
data: {
name: 'Bob'
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
Hello {{name}}
<style>
body { color: blue; }
</style>
</div>
JS Fiddle: https://jsfiddle.net/7g1vp68b/6/
When tag is outside of the vue element, it renders okay.
Vue can't parse <style> inside template.
If you check console log, there is an warning:
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as
, as they will not be parsed.
You should place <style></style> outside of Vue template, or using Vue single file component
I want to connect this toastr-library into my component:
my-component.vue
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style>
/* HOW TO IMPORT `toastr.css` FROM NODE_MODULES HERE?
</style>
How to connect library's css from node_modules directory?
As #LinusBorg suggested here in vue-loader discussion thread, you can use src-attribute inside <style>-tag:
my-component.vue
<script>
import toastr from 'toastr';
export default {
mounted(){
toastr.success('Hello from toastr!');
}
}
</script>
<template>
<div>
Template for my-component.vue here.
</div>
</template>
<style src='toastr/build/toastr.min.css'></style>
I have a shared-styles element that keeps most of my applications colors. I can easily change the colors manually in shared-styles.html, and all of my other components can inherit from there if I use the CSS variables.
My problem is I need to update the CSS variables in shared-styles.html and have all the other components that inherit the CSS variables to update their colors accordingly. Below is my shared-styles.html. For brevity, I removed all the variables except --app-primary-color.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style is="custom-style">
:host {
--app-primary-color:#2196F3;
}
</style>
</template>
<script>
class SharedStyles extends Polymer.Element {
static get is() { return 'shared-styles'; }
ready(){
super.ready();
console.log('update css');
this.updateStyles({'--app-primary-color': 'red'});
}
}
window.customElements.define(SharedStyles.is, SharedStyles);
</script>
</dom-module>
This is how I am including them in the other components. For example:
<dom-module id="test-element">
<template>
<style include="shared-styles">
The shared style is not a Polymer element, so it should not extend Polymer.Element and should not have a <script> tag. It should be defined like this:
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>
:host {
--app-primary-color: #2196F3;
}
</style>
</template>
</dom-module>
Then, call this.updateStyles in the root element (e.g., <my-app>) to apply a global style in Polymer 2.0. Note that all elements under <my-app> would inherit the newly specified styles.
Example
Here are instructions using Polymer CLI's polymer-2-starter-kit template:
Install the bleeding edge Polymer CLI (npm install polymer-cli#next), required for the polymer-2-starter-kit template.
Run:
mkdir polymer-2-shared-styles-demo
cd polymer-2-shared-styles-demo
polymer init polymer-2-starter-kit
In src/my-app.html, add a <button> to the menu, which will change the value of --app-primary-color:
<template>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<!-- **** LINE 77: Add button below **** -->
<button on-click="_changeAppColor">Change app color</button>
<script>
class MyApp extends Polymer.Element {
/* *** LINE 130: Define button-click handler below **** */
_changeAppColor() {
this.updateStyles({'--app-primary-color': 'red'});
}
In src/shared-styles.html, change .circle's background to use --app-primary-color:
.circle {
/* *** LINE 33: Use --app-primary-color below **** */
background: var(--app-primary-color, #ddd);
Run polymer serve -o to open the starter kit in the default browser.
Click the button in the menu to change the color of the toolbar and the circles in each page. It should look like this:
GitHub project