Logically, I have everywhere exposed that the dark theme is disabled. This can be viewed, for example, in the developer console: $vm0.$vuetify.theme.isDark, $vm0.$vuetify.theme.disabled, $vm0.$vuetify.theme.dark.
In the nuxt.config.js in the connections and settings section of vuetify, the following declarative code:
buildModules: [
['#nuxtjs/vuetify', {
theme: { disable: true },
treeShake: true,
defaultAssets: false,
icons: {
iconfont: 'md'
}
}],
// ...
]
Despite all this, the Vuetify components add the theme--dark class to the list of classes: html in the developer console.
As a result, all styles are redefined. White text on a white background, etc. How can I solve this problem?
Try something like this :
buildModules: [
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
],
// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
theme: {
dark: false, <--- here
},
},
Related
I am trying to load the mapboxgl stylesheet in my Nuxt 3.0.0-rc.8 app. Typically with a Vue projec I manually add it to the head of the index.html page.
However, that is not how you do in Nuxt 3 apparently. I've tried adding it to the head and css options in the nuxt.config.ts file, but neither got me there. I did notice that when I added it to the css array, it was added to my header but 'https://' was replaced with '_nuxt'.
I know I am missing something simple. Here is my config file:
export default defineNuxtConfig({
css: [
'~/assets/css/main.css',
],
build: {
postcss: {
postcssOptions: require('./postcss.config.js'),
},
},
buildModules: ['#pinia/nuxt'],
runtimeConfig: {
treesAPIKey: '',
public: {
baseURL: '',
mapToken: '',
},
},
head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] },
});
Use app.head instead of head.
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
app: {
head: {
link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }]
}
}
})
The question is basically in the title, but I've created the demo project with react-native 0.64.0-rc.4. This version of RN uses react-17, so supposedly one should also be able to use the new JSX transform. The question is whether it's actually possible, and how. When I comment the line import React from 'react'; in App.js, the app creates a render error because of unknown React variable.
You can refer this comment
I had suffer same issue and resolve it by changing babel.config.js only.
This is my babel.config.js.
The key is useTransformReactJSXExpermiental: true and runtime: 'automatic'
module.exports = {
presets: [
['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
'#babel/preset-typescript',
],
sourceMaps: 'inline',
plugins: [
[
'#babel/plugin-proposal-decorators',
{
legacy: true,
},
],
[
'#babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
'#babel/proposal-object-rest-spread',
['babel-plugin-styled-components'],
'react-native-reanimated/plugin',
],
};
In metro.config.js, set experimentalImportSupport to true:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
};
i use "#nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App.
After install, it created a tailwind.config.js file. And then, i added a little code as you could see below:
module.exports = {
theme: {},
variants: {},
plugins: [],
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
},
options: {
important: true,
},
};
I want all the Tailwind's class have important, but it weren't.
inside the tailwin's class
What i did wrong?
Most probably you are running NODE_ENV=production so its purging unused classes
Setting purge.enabled=false will do what you want. I don't recommend setting it false. If a class is used purge won't remove the class. As you are not using most of the classes in HTML they are getting removed.
module.exports = {
theme: {},
variants: {},
plugins: [],
purge: {
enabled: false, // DONT DO THIS IN PRODUCTION
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
},
options: {
important: true,
},
};
If I look at the documentation the important key should be at the root of export :
// tailwind.config.js
module.exports = {
important: true,
}
instead of
// tailwind.config.js
module.exports = {
options: {
important: true,
}
}
I know what messed up.
So turn out that the problem was PostCSS
And, another thing is that in older version, the important was in options, but now it placed at the root
// tailwind.config.js
module.exports = {
important: true,
}
I want to ignore eslint all 'style' tags in .vue files.
I have used #vue/prettier with eslint.
How to disable only 'style' tags in Vue template files?
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
jquery: true,
node: true
},
plugins: [
"vue"
],
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
"prettier/prettier": "error",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"new-cap": [
2,
{
newIsCap: false,
capIsNew: false
}
],
"no-useless-escape": 0
},
parserOptions: {
parser: "babel-eslint",
sourceType: "module"
},
};
prettier and vue just don't mix. It has been a huge undertaking to figure this out. I use VSCode and man does it ruin my workflow. I had an issue with the ctlf feature that was indiscriminate in the way it determined which lines needed it.
Try using Jon Gallants settings from here a link!
It totally worked for me!
Can someone let me know some examples of how to add and configure Font Awesome 5 fonts to Buefy using NPM.
The documentation on this is quite sparse. Thanks!
https://buefy.github.io/documentation/start
To use NPM instead of a CDN:
Install nuxt-fontawesome.
npm i nuxt-fontawesome
npm i #fortawesome/fontawesome-svg-core #fortawesome/vue-fontawesome
Install an icon set, for example:
npm i #fortawesome/free-solid-svg-icons
Edit nuxt.config.js as follows:
modules: [
'nuxt-buefy',
'nuxt-fontawesome'
],
buefy: {
materialDesignIcons: false,
defaultIconPack: 'fas',
defaultIconComponent: 'font-awesome-icon'
},
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: ['fas']
}
]
}
Usage example:
<b-icon pack="fas" icon="home" size="is-large" />
I got it working like this in nuxt.config.js:
modules: [
'#nuxtjs/axios',
'#nuxtjs/router',
['nuxt-buefy', {
css: false,
materialDesignIcons: false,
defaultIconComponent: 'vue-fontawesome',
defaultIconPack: 'fas',
}],
],
If you read the nuxt-buefy docs, it shows two ways:
{
modules: [
// Simple usage
'nuxt-buefy',
['nuxt-buefy', { /* buefy options */ }]
]
}
or
{
modules: [
// Simple usage
'nuxt-buefy',
],
buefy: { /* buefy options */ }
}
https://github.com/buefy/nuxt-buefy