I want to add custom theme to element-ui.
I have installed element-ui, babel-plugin-component.
Nuxt src directory
module.exports = {
srcDir: 'client/',
...
Add nuxt plugin
import Vue from 'vue';
import {
Button,
...
} from 'element-ui';
import lang from 'element-ui/lib/locale/lang/ru-RU';
import locale from 'element-ui/lib/locale';
locale.use(lang);
Vue.use(Button);
...
Add plugin to nuxt config
{ src: '#/plugins/element-ui.js' },
.babelrc file
{
"babelrc": true,
"cacheDirectory": false,
"presets": ["#nuxt/babel-preset-app"],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~client/assets/styles/element-ui/theme"
}
]
]
}
Theme don't load.
How to fix it?
Related
I am working on a capacitor app and it works fine both on browser and android phones but for one page when it's routed to it gets stuck on ios.
I have tried to check and saw it's because some files are not loading
This is my vite config
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import nodeResolve from '#rollup/plugin-node-resolve'
import json from '#rollup/plugin-json'
import alias from '#rollup/plugin-alias'
import vuetify from '#vuetify/vite-plugin'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
alias(),
],
define: {
'process.env': {}
},
build: {
rollupOptions: {
transformAssetsUrls: {
img: ['src', 'data-src']
},
plugins: [
nodeResolve({
browser: true,
preferBuiltins: false
}),
json()
]
}
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
'#': path.resolve(__dirname, 'src'),
},
},
server: {
fs: {
// Allow serving files from one level up to the project root
strict: false
}
},
css: {
preprocessorOptions: {
// global scss import
scss: {
charset: false,
additionalData: `
#import "#/styles/variables";
#import "#/styles/mixins.scss";
`
}
}
}
})
And this is how I am loading the images located inside src/assets folder:
I am using vue 3, vite 2.7 and capacitor 3
Update:
I'm not sure what was happening but the issue was occurring when I used vue <component /> tag. I fixed it by rewriting that part
You probably fixed this but since we fixed our, i'd like to share our solution.
We're building an app for iOS and Android using Quasar.js v2, vue3 and capacitor.
We had a similar problem when we built to production for iOS and Android.
In order To fix this we had to add viteConf.base = '/' in the build object in the quasar config file (which replaces vite.config.js), doc for base shared options here
build: {
extendViteConf (viteConf, { isServer, isClient }) {
viteConf.base = '/'
}...
Dependencies in package.json
"#capacitor-community/firebase-analytics": "^1.0.1",
"#capacitor/app": "^1.0.7",
"#capacitor/clipboard": "^1.0.2",
"#capacitor/device": "^1.1.1",
"#capacitor/keyboard": "^1.2.2",
"#capacitor/push-notifications": "^1.0.9",
"#capacitor/share": "^1.0.7",
"#capgo/capacitor-updater": "^3.3.12",
"#quasar/app-vite": "^1.0.5",
"#quasar/extras": "^1.14.3",
"quasar": "2",
"vue": "3",
Hope this can help
I have a Vue web component. When I build it as a normal Vue component everything worked fine. However, it lost all the Tailwind styling immediately I converted it to a Vue Web Component. Thanks for your help in advance.
tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
},
},
},
plugins: [
],
}
tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
and my vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})],
build: {
lib: {
entry: './src/entry.js',
formats: ['es','cjs'],
name: 'web-component',
fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
},
sourcemap: true,
target: 'esnext',
minify: false
}
})
Anyway, for now, what I have done is to add Tailwind directly to the web component and it works.
<style>
#import url("../tailwind.css");
</style>
In src/main.js change import "./assets/main.css"; to your tailwind css file
`
I installed storybook via the vue-cli and added a .scss file in my preview.js:
import "assets/scss/core.scss";
import Vue from "vue";
import CompositionApi from "#vue/composition-api";
Vue.use(CompositionApi);
where "assets" is an alias configured in my vue.config.js to refer to the src/assets path. According to the docs :
The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder.
So the path should ne correctly resolved, right ? However the style does not seem to be loaded as it is not applied to my components.
Am I missing something ?
FYI, here is my main.js:
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../../src/**/*.stories.#(js|jsx|ts|tsx|mdx)"],
addons: [
"#storybook/addon-essentials",
"#storybook/addon-links",
],
};
And my vue.config.js :
const path = require("path");
module.exports = {
configureWebpack: {
resolve: {
alias: {
//aliases go here
"#": path.resolve(__dirname, "src"),
assets: path.resolve(__dirname, "./src/assets"),
},
},
},
css: {
loaderOptions: {
scss: {
additionalData: `#import 'assets/scss/variables';`,
},
},
},
};
Thanks !
I'm using the modularized antdv with babel-plugin-import and when import InputSearch throws me the error described in the title.
"ant-design-vue": "^2.2.8"
"vue": "^3.0.0"
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { ConfigProvider, Button, Form, Input, InputSearch } from "ant-design-vue";
import "./styles/index.less";
const app = createApp(App);
app.use(ConfigProvider);
app.use(Button);
app.use(Form);
app.use(Input);
app.use(InputSearch);
app.mount("#app");
the error that shows:
These dependencies were not found:
* ant-design-vue/es/input-search in ./src/main.js
* ant-design-vue/es/input-search/style in ./src/main.js
// babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
] // `style: true` for less
]
};
The solution were remove InputSearch and only use Input in the use of vuejs and it works.
import {
ConfigProvider,
Button,
Form,
Input,
// InputSearch // <--- remove it
} from "ant-design-vue";
My stylus global file is imported multiple times.
How import global stylus in vue?
my vue.config.js
module.exports = {
css: {
loaderOptions: {
stylus: {
import: [
'~#/assets/stylus/reset.styl',
'~#/assets/stylus/vars.styl',
'~#/assets/stylus/mixins.styl',
'~#/assets/stylus/atomic.styl',
'~#/assets/stylus/grid.styl',
'~#/assets/stylus/colors.styl',
'~#/assets/stylus/global.styl'
]
}
}
},
}
my result
here