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
Related
this is the error that shows when i run the npm run dev after deleting all the laravel mix plugin etc
failed to load config from /var/www/html/vite.config.js
error when starting dev server:
Error: Cannot find module 'laravel-vite-plugin'
Require stack:
- /var/www/html/vite.config.js
- /var/www/html/node_modules/vite/dist/node/chunks/dep-5e7f419b.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
at Module._load (node:internal/modules/cjs/loader:885:27)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/var/www/html/vite.config.js:36:42)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at _require.extensions.<computed> [as .js] (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62103:24)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
#[tag:error]
app.js with all required changed with inport + in my project there is not a bootstrap.js folder or a app.css file
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
import routes from './routes';
import axios from 'axios'
import VueAxios from 'vue-axios'
import Form from './utilities/Form';
import lodash from 'lodash';
import VueAutosuggest from "vue-autosuggest";
import BootstrapVue3 from 'bootstrap-vue-3'
import mitt from 'mitt';
import Vuetable from 'vue3-vuetable';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import Toast, { POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";
import VueApexCharts from "vue3-apexcharts";
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const emitter = mitt();
export default router;
const app = Vue.createApp({});
app.config.performance = true;
import('./functions').functions(app);
app.config.globalProperties.emitter = emitter;
app.use(router);
app.use(VueAxios, axios);
app.use(VueAutosuggest);
app.use(lodash)
app.use(BootstrapVue3)
app.use(Vuetable)
app.use(Toast, {
position: POSITION.BOTTOM_RIGHT
});
app.use(VueApexCharts);
app.use(VueSweetalert2);
import lodash from 'lodash';
import axios from 'axios';
window.Form = Form;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//LOGIN COMPONENTS/PARTIALS//
app.component('login-header', require('./components/login-header').default);
app.component('fill-email', require('./components/Partials/fillEmail').default);
app.component('side-bar', require('./components/Partials/side-bar').default);
app.component('top-nav-bar', require('./components/Partials/top-nav-bar').default);
app.component('laravel-pagination', require('./components/Partials/laravel-pagination').default);
app.component('row-height', require('./components/Partials/row-height').default);
app.component('validation-errors', require('./components/Partials/validation-errors').default);`
file containing vite.config.js with plugin for vue and vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '#vitejs/plugin-react';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
// react(),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'#': '/resources/js'
}
}
});
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?
I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's rendering using Times. I'm not sure why.
Here's my index.tsx:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "#material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "#material-ui/styles";
const theme = createMuiTheme({
typography: {
fontFamily: ["Arial"].join(",")
}
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={configureStore()}>
<App />
</Provider>
</ThemeProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
My app component:
import React from "react";
import { useSelector } from "react-redux";
import HeaderContainer from "../containers/layout/header/HeaderContainer";
import { ThemeProvider, useTheme } from "#material-ui/styles";
import theme from "../styling/mainTheme";
import { createMuiTheme } from "#material-ui/core";
const App: React.FC = () => {
const theme = useTheme();
return (
<div className="App">
<HeaderContainer />
</div>
);
};
export default App;
The header container (will contain logic):
import * as React from 'react';
import Header from '../../../components/layout/header/Header';
export interface HeaderContainerProps {
}
export default class HeaderContainer extends React.Component<HeaderContainerProps> {
public render() {
return <Header />
}
}
And finally the header:
import * as React from "react";
import { styled } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
export default function Header() {
return (
<AppBar>
<h2>Hello</h2>
</AppBar>
)
}
I've tried putting the ThemeProvider in different components, but my h2 is still rendering as Times. Would be great if someone could spot the issue. Thanks
Checking the documents of material-ui it turns out you have imported some of the things from library in a wrong way. Like the docs state -
import { useTheme } from '#material-ui/core/styles';
import { createMuiTheme } from '#material-ui/core/styles';
Which can basically be
import { useTheme, createMuiTheme } from '#material-ui/core/styles';
Same goes for ThemeProvider
import { ThemeProvider } from '#material-ui/core/styles';
In MUI V5 you need to import ThemeProvider and createTheme from #mui/material/styles instead of #mui/styles.
import * as React from 'react';
import ReactDOM from 'react-dom';
import {red} from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
function App() {
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
ReactDOM.render(<App />, document.querySelector('#app'));
source
I cannot see any change when applying "ThemeProvider" tag, even in a simple project as shown below.
There is no errors/warnings in the browser console (except for unused imports, but it fails even if I remove them all).
import React, { Component } from "react";
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import MainBar from "./modules/MainBar";
import MainTemplate from "./style/MainTemplate";
import Palette from "./palette";
import { Button } from "#material-ui/core";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
typography: {
useNextVariants: true
},
palette: {
primary: purple,
secondary: {
main: "#f44336"
}
}
});
class App extends Component {
render() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
</div>
);
}
}
export default App;
Any idea about it? Its almost like documentation example, and it doesn't work.
Thank you.
Import MuiThemeProvider like,
import { MuiThemeProvider } from '#material-ui/core/styles';
And replace your code,
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
with this,
<MuiThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</MuiThemeProvider>
Ref
I'm using react and I found this awesome library that helps you define css classes for components called classNames.
I'm also using the webpack css-loader in order to import css into my component and when trying to use classNames with import css I get a syntax error.
Here is my example:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
let style = classNames({
styles.someClass: true
});
}
}
How can I use both?
You can use the computed properties syntax of ES6/2015, for example:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
const style = classNames({
// This is a computed property, i.e. surrounded by []
[styles.someClass]: true
});
}
}
But that is just for a single class, in these simple cases you could just do something like:
const style = this.state.active ? styles.someClass : '';
The classNames library is especially useful when combining multiple classes, like so:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
const style = classNames(
// add as many classes or objects as we would like here
styles.foo,
styles.bar,
{ [styles.someClass]: this.props.active }
);
}
}