Normally in Vue I have main.ts file so I can just import and mount Vue icon into the app, for example:
import { createApp } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdDragindicator, HiTrash, HiPlus, HiSolidSearch, BiTextLeft, BiTypeH1, BiTypeH2, BiTypeH3, BiHr, BiQuote } from 'oh-vue-icons/icons'
import '#/assets/css/main.css'
import App from './App.vue'
addIcons(MdDragindicator, HiTrash, HiPlus, HiSolidSearch, BiTextLeft, BiTypeH1, BiTypeH2, BiTypeH3, BiHr, BiQuote)
const app = createApp(App)
app.component('v-icon', OhVueIcon)
app.mount('#app')
So how can I do the same thing in Nuxt 3 where I only have nuxt.config.ts
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 am using Quasar 2 Vue 3. When I use idle-vue-3 with mitt in the following way:
import { createApp } from 'vue';
import IdleVue from "idle-vue-3";
import mitt from 'mitt';
import App from "../App.vue";
const app = createApp(App);
const emitter = mitt();
const idleTimeInMillis = 60000;
app.use(IdleVue, {
eventEmitter: emitter, // OR eventEmitter: emitter.emit,
store: Store,
idleTime: idleTimeInMillis,
startAtIdle: false
});
export default app;
I get i.$emit is not a function on the console. Any advice and insight is appreciated.
Remove eventEmitter: emitter,. It is not needed.
I am try to import createGlobalStyle from styled-components but it does not seem to be working. I installed styled-components npm package, the version is #3.4.10.
const GlobalStyle = createGlobalStyle`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
The above code is where I am trying to import createGlobalStyle
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<App />
<GlobalStyle />
</React.StrictMode>,
document.getElementById('root')
)
And this is the index.js file where I am using the GlobalStyle component.
After running the code I am getting the following error:
./src/theme/globalStyles.js
Attempted import error: 'createGlobalStyle' is not exported from 'styled-components'.
Any help would be highly appreciated
If you're using styled-components version 3.4.10, then you have to use injectGlobal instead of createGlobalStyle, because createGlobalStyle was only release in v4 of styled-components. Check it out: [Deprecated] injectGlobal
So, in order for your code to work, you have to change a few things:
import { injectGlobal } from 'styled-components';
const GlobalStyle = injectGlobal`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
And in your index.ts
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<GlobalStyle /> // this comes first
<App />
</React.StrictMode>,
document.getElementById('root')
)
I have this code that doesn't render the image.
import styled from 'styled-components';
import ImageDiv from '../../shared/Image-div';
import { sideimage, signin } from '../../../assets/images';
import device from '../../../config/device';
const LogoDiv = styled(ImageDiv)`
background-image: url(${signin});
#media ${device.mobileS} {
background-image: url(${sideimage});
}
`;
export default LogoDiv;
Rendered code:
import React from 'react';
import { sideimage } from '../../../assets/images';
import SignUpButton from './sign-up-button';
import Input from '../../shared/Input-field';
import LogoDiv from '../../shared/Image-div';
import FormDiv from '../../shared/Sign-in-div';
import { NunitoItalic18, Nunito20 } from '../../shared/nunito/nunito';
import ImageContainer from '../../shared/image-container';
import ScreenDiv from '../../shared/screen-div';
type Props = {
setDisplayScreen: Function,
};
const marginInputPercentage = '4.3%';
const marginTopPercentage = '12.3%';
const buttonMarginPercentage = '6.7%';
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<LogoDiv />
</ImageContainer>
);
export default SignIn;
This is the code base being used for the assignment.
Code for assets/images
import logo from './qiisologo/qiiso.png';
import signup from './signup/signup.png';
import signin from './signin/signin.jpg';
import sideimage from './signin/sideimage.jpg';
export { logo, signup, signin, sideimage };
Am I using a wrong syntax, because the image doesn't render? Thank you.
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