i'm trying to use the antd tooltip with vue3
<a-tooltip :mouseEnterDelay="1">
<template #title> prompt text </template>
<a-button type="danger" shape="circle" #click="handleDelete(record.id)">
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
the code looks ok, but this is the result:
kinda ugly, i'm also using the same version of the docs:
"dependencies": {
"ant-design-vue": "^2.0.0-rc.6",
"axios": "^0.21.1",
"lockr": "^0.8.5",
"lodash": "^4.17.20",
"vue": "^3.0.0",
"vue-i18n": "^9.0.0-beta.17",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
edit: added main.ts full code.
import { createApp } from 'vue'
import App from '#/App.vue'
import router from '#/router'
import store from '#/store'
import 'ant-design-vue/dist/antd.css'
import '#/style/index.scss'
import { createI18n } from 'vue-i18n'
import messages from '#/assets/i18n.json'
import { Layout, Menu, Select, Avatar, Dropdown, Tag, Divider, Table, Tooltip, Button, message, Popconfirm } from 'ant-design-vue'
const i18n = createI18n({
legacy: false,
locale: 'en',
messages
})
const app = createApp(App)
app.config.globalProperties.$message = message
app
.use(i18n)
.use(store)
.use(router)
.use(Layout)
//...all the other use of ant
.mount('#app')
anyone can help?
Related
So I have a default Laravel app working with Vue 3 and assets configured by Vite, TailwindCSS and TailwindUI installed. This all works fine.
I understand to have another CSS framework, I need to prefix it to avoid clashes. According to these instructions, I need to add the following line: (after installing via npm):
import PrimeVue from 'primevue/config'; //I have included this in app.js
as well as reference these styles:
primevue/resources/themes/saga-blue/theme.css
primevue/resources/primevue.min.css
primeicons/primeicons.css
How exactly do I reference these css files with a prefix so as to avoid clashes?
My postcss.config.js file currently looks like this:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
My app.js looks like this:
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
/* added by me*/ import PrimeVue from 'primevue/config';
/* added by me*/ import InputMask from 'primevue/inputmask';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(PrimeVue)
/*added by me*/ .component('InputMask', InputMask)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
I'm having error on my macbook of "Cannot read properties of undefined (reading 'useSystemColorMode')" with NextJs and chakra-ui v1.7.5 when using extendTheme
Here is my package.json file
"dependencies": {
"#chakra-ui/icons": "^1.1.1",
"#chakra-ui/react": "^1.7.5",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"framer-motion": "^5.6.0",
"next": "12.0.8",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1"
},
src/theme/index.js.
already tried spreading ...config, but issue still persists.
import { extendTheme, theme as base } from "#chakra-ui/react";
const config = {
initialColorMode: "light",
useSystemColorMode: false,
};
const theme = () =>
extendTheme({
config,
fonts: {
heading: `Montserrat, ${base.fonts?.heading}`,
body: `Inter, ${base.fonts?.body}`,
},
});
export default theme;
pages/_app.js
import { ChakraProvider } from "#chakra-ui/react";
import theme from "../src/theme";
import "../src/theme/styles.css";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
I've followed all the given instructions here
https://chakra-ui.com/guides/getting-started/nextjs-guide but still can't resolve the issue. Hoping someone can help on this. Thanks!
I am having trouble trying to change my navbar's color.. Am I missing any steps?
this is the component i am trying to render:
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';
const Topbar = () => {
return(
<Navbar className={styles.mainBar}>
<Navbar.Brand>Restaurant</Navbar.Brand>
<Nav.Link>Menu</Nav.Link>
</Navbar>
);
}
export default Topbar;
this is the CSS module
.mainBar{
background-color: rgb(255, 153, 0);
}
this is the dependencies in the package.json i have for the project:
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
bootstrap is getting applied as i imported to the index.js...
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
You are importing a css file into styles but unlike js modules which export functions, objects, etc your css file doesn't export such things. you need to remove styles from your import and just import your css file like this
import './MainMenu.module.css';
And in your className simply mention your class name
<Navbar className="mainBar">
It works fine
I want to use third party library element-plus in my component. In setup defineComponent entends that component. In console, it would warn Failed to resolve component: el-radio at <App>
In about router, Here is the about.vue
<template>
<div id="popup-content"></div>
</template>
<script>
import {
onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '#/components/Test.vue';
export default {
setup() {
onMounted(() => {
const myNewComponent = defineComponent({
extends: Test,
});
createApp(myNewComponent).mount('#popup-content');
nextTick(() => {
createApp(myNewComponent).mount('#popup-content');
});
});
},
}
Test component has used element-plus el-raido component, Test.vue
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data() {
return {
radio: '1',
};
},
};
</script>
I have add element-plus, and register all in main.js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
I have found this question
Extend vue.js component from third-party library
I really really don't understand what are you trying to achieve by extending your perfectly fine Test component BUT...
Vue 3 is very different from Vue 2 - a lot of global API's (as component registration for example) are not global anymore but are tight to a "app instance" (created by createApp)
So even if you register Element components in main.js (app.use(ElementPlus);), the another app instance (why!?) created in onMounted hook of about.vue component knows nothing about the components! That is the reason for an error...
You must register components in every app instance created by createApp you want to use them in ....
As #Michal Levý answered, I need to register components in every app instance created by createApp.
Here is the working version about.vue, in case someone need.
<template>
<div id="popup-content"></div>
</template>
<script>
import {
onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '#/components/Test.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
export default {
setup() {
onMounted(() => {
const myNewComponent = defineComponent({
extends: Test,
});
const app1 = createApp(myNewComponent);
nextTick(() => {
app1.use(ElementPlus);
app1.mount('#popup-content');
});
});
},
}
I know I can import colors so I can use deep-purple lighten-4 in JS, how would I actually do that in the Vuetify theme section below? Do I need to add a Vue.use(colors) ?
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import colors from 'vuetify/es5/util/colors'
import App from './App'
import router from './router'
Vue.use(Vuetify, { theme: {
primary: '#ee44aa',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
From the docs:
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify, {
theme: {
primary: colors.blue.darken4,
secondary: colors.amber.lighten2
}
})
Any theme color you don't specify inside the theme object is just given its default value by Vue.
just use the color="" <- then your desired color ex.
<v-btn color="success">Success</v-btn>
here is my sample pen for further more example
https://codepen.io/pen/?editors=1010