I'm trying to add a package on my project called pretty-checkbox-vue I followed its instruction but it seemed it did not work. The documentation said I need to add the SCSS file so I did
this is my code on vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `
#import '~pretty-checkbox/src/pretty-checkbox.scss';
`
}
}
}
};
and this my package.json
{
"name": "janu-form-generator",
"version": "1.0.0",
"description": "",
"main": "dist/janu-form-generator.ssr.js",
"browser": "dist/janu-form-generator.esm.js",
"module": "dist/janu-form-generator.esm.js",
"unpkg": "dist/janu-form-generator.min.js",
"files": [
"dist/*",
"src/**/*.vue"
],
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve dev/serve.js",
"prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
},
"dependencies": {
"pretty-checkbox-vue": "^1.1.9",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^3.0.0",
"sass": "^1.49.8",
"sass-loader": "^10.1.1",
"vuetify": "^2.6.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.4.2",
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"cross-env": "^7.0.3",
"minimist": "^1.2.5",
"rimraf": "^3.0.2",
"rollup": "^2.52.8",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"vue": "^2.6.14",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"peerDependencies": {
"vue": "^2.6.14"
},
"engines": {
"node": ">=12"
}
}
the problem that I'm experiencing is that the look of the radio input and checkbox did not change
Related
I use command in idea terminal
e.g.npm run electron:serve
My code environment：
Mac M1/macos Ventura13.0.1
node#14.21.2
npm#6.14.17
electron#12.2.3
The command stopped after Vue project compiled successful.
like this:
I try to run command rm -rf node_modules package-lock.json&&npm install
but cannot fix the situation.
Colleague's code environment：
win10
node#16.17.1
npm#8.19.2
electron#9.4.4
The normal situation in my colleague's computer:
This is my package.json
{
"name": "RetinaCare",
"version": "2.3.11",
"publishDate": "2022-03-07",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"axios": "^0.21.1",
"chokidar": "^3.4.2",
"core-js": "^3.6.5",
"el-table-infinite-scroll": "^1.0.10",
"electron-builder": "^23.6.0",
"electron-updater": "^4.3.9",
"element-ui": "^2.13.2",
"html2canvas": "^1.0.0-rc.7",
"iconv-lite": "^0.6.3",
"js-md5": "^0.7.3",
"jspdf-html2canvas": "^1.4.9",
"print-js": "^1.2.0",
"qiao-is-online": "0.0.6",
"vue": "^2.6.11",
"vue-html-to-paper": "^1.3.1",
"vue-image-zoomer": "1.0.4",
"vue-print-nb": "^1.5.0",
"vue-qr": "^2.4.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"electron": "^12.2.3",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
This is my vue.config.js
module.exports = {
pages: {
index: 'src/main.js',
login: 'src/login/main.js'
},
chainWebpack: config => {
config.resolve.symlinks(true)
},
devServer: {
hot: true,
hotOnly: true,
watchContentBase: false
},
configureWebpack: {
target: 'electron-renderer',
externals: ['fsevents']
},
pluginOptions: {
electronBuilder: {
extraResources: {
from: './public/dll',
to: './dll'
},
builderOptions: {
asar: false,
mac: {
target: {
target: 'default',
arch: [
'x64',
'arm64'
]
}
},
win: {
requestedExecutionLevel: 'requireAdministrator',
icon: './public/ljj_256.ico',
artifactName: '${productName}-Setup-${version}.${ext}',
target: [
{
target: 'nsis',
arch: [
'ia32'
]
}
]
},
productName: 'testProject',
nsis: {
include: './public/nsis/installer.nsh',
perMachine: false,
runAfterFinish: true,
oneClick: false,
allowElevation: true,
allowToChangeInstallationDirectory: true,
installerIcon: './public/ljj_256.ico',
uninstallerIcon: './public/ljj_256.ico',
installerHeaderIcon: './public/ljj_256.ico',
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'electronProject',
deleteAppDataOnUninstall: true
},
publish: [
{
provider: 'generic',
url: 'https://www.electronProject_test.com/client'
}
]
}
}
}
}
This is project catalogue:
Because mac m1's framework is arm64,i changed electron version from ^9.2.0 to ^12.2.3, added electron-builder ^23.6.0 to package.json.
By the way i started sample project of vue-electron successful on the Mac.The question is so strange😭
The issue was resolved by delete yarn.lock in project. Beacuse of yarn.lock in my project, so vue-cli will look for yarn runtime environment in server. But i have not install yarn runtime environment on server. The code stop at hasProjectYarn(api.getCwd()). If you dont need yarn, Meanwhile yarn.lock file in your project ,you should delete the file!
Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?
I made a custom npm package which I'm trying to install in my Vue application. I tried to follow some tutorials and steps but I'm getting an error below:
This dependency was not found:
chatinterfaceui in ./src/main.js
To install it, you can run: npm install --save chatinterfaceui
My main.js file in my chatinterfaceui lib is:
import ChatUi from './ChatUi.vue'
export default {
install (Vue, options) {
if (!options || !options.store) {
throw new Error('Please initialise plugin.');
}
Vue.component('chat-ui', ChatUi);
}
}
The package.json file for the chatinterfaceui lib:
{
"name": "chatinterfaceui",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name chatinterfaceui ./src/ChatUi.vue",
"lint": "vue-cli-service lint"
},
"main": "./dist/chatinterfaceui.common.js",
"dependencies": {
"autolinker": "^3.14.1",
"core-js": "^3.6.4",
"emoji-js": "^3.5.0",
"escape-goat": "^3.0.0",
"msgdown": "^1.0.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My main.js file for the Vue application is:
import Vue from 'vue'
import App from './App.vue'
import ChatUi from 'chatinterfaceui'
Vue.use(ChatUi)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
My package.js is:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"chatinterfaceui": "^0.1.0",
"core-js": "^3.6.4",
"dialogflow": "^1.2.0",
"uuid": "^8.0.0",
"vue": "^2.6.11",
"vue-beautiful-chat": "^2.3.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
In my main Vue application in which I want to use my library, when I try to use the library, I'm getting the warning. I feel I'm doing something silly, but can't understand or find what.
Hi I have build a webcomponent using vue. It is working perfectly in chrome . But it is returning a blank screen in IE 11. I have given babel configuaration . I think the issue is the arrow operator not getting transpilled.
package.json
{
"name": "web-component-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:prod": "vue-cli-service build --target wc --name email-compose ./src/views/EmailCompose.vue"
},
"dependencies": {
"axios": "^0.19.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"core-js": "^3.6.4",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"query-string": "^5.1.1",
"vue": "^2.6.11",
"webcomponentsjs": "^1.0.2"
},
"devDependencies": {
"#babel/preset-env": "^7.8.4",
"#vue/cli-plugin-babel": "~4.2.0",
"#vue/cli-service": "~4.2.0",
"#webcomponents/webcomponentsjs": "^2.4.2",
"copy-webpack-plugin": "^5.1.1",
"vue-template-compiler": "^2.6.11",
"webpack-cli": "^3.3.11"
}
}
babel.config.js
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise', // already default included now
'es6.array.iterator', // already default included now
'es6.symbol',
'es6.object.assign'
]
}]
]
}
is this due to vue-wc-wrapper.js ? should I add that to transpile dependencies ?
I need to add UglifyJS to a VueJS CLI 3 project.
My vue.config.js:
var webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJsPlugin()],
},
publicPath: "./",
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
This is the error message I get after trying to run npm run build.
Invalid options in vue.config.js: "optimization" is not allowed.
"plugins" is not allowed
I tried updating all packages and install the webpack UglifyJS plugin.
package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"firebase": "^6.3.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.1.2",
"vue-router": "^3.0.3",
"vuetify": "^1.5.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-pwa": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5",
"webpack": "^4.40.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {"no-console": "off"},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
How to add UglifyJS to the VueJS project?