How to add UglifyJS to a VueJS project - vue.js

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?

Related

Vue2 with pinia fails to start instance

I decided to use Pinia with my vue2 project but it fails once I load the page.
Error:
TypeError: Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"]) is not a function. (In 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])(true)', 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])' is an instance of Object)
createPinia — pinia.mjs:955
packages.json
{
"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": {
"chart.js": "^3.9.1",
"core-js": "^3.6.5",
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"driver.js": "^0.9.8",
"jquery": "^3.6.0",
"pdfjs-dist": "2.15.349",
"pinia": "^2.0.22",
"vue": "^2.6.11",
"vue-chartjs": "^4.1.1",
"vue-tour": "^1.5.0",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^1.6.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
js entrypoint
import Vue from 'vue'
import myapp from './myapp.vue'
import { PiniaVuePlugin,createPinia } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia(); // <-- this is the problem
new Vue({
pinia,
render: (h) => h(myapp)
}).$mount("#myapp");

Getting a "TypeError: Invalid PostCSS Plugin found at: plugins[0]" whenever I try to build my css file using postcss and tailwind

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?

vue 2 project doesn't enable hot loading

my vue project doesn't enable hot load, here is my package.json
{
"name": "vue-tailwind-admin",
"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.24.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.4",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuedraggable": "^2.24.1",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"postcss": "^7.0.39",
"sass-loader": "^10.2.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
I have no idea what goes wrong, please help
maybe you can try to use this way
https://github.com/vuejs/vuepress/issues/2392
check your node versiton >= 12.14
check your watchpack versiton >= 1.6.1
and you can description more details plz.

Custom NPM Package installing issue

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.

How to configure jest and babel to work with vue?

I'm adding jest to my project and can't configure it properly.
When I run $ jest I'm getting a SyntaxError: Cannot use import statement outside a module.
I've searched for quite a while for a solution but none worked...
Can someone please help me config jest and babel?
Here are my files:
package.json
{
"name": "psyque-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"actioncable-vue": "^1.5.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"material-design-icons-iconfont": "^5.0.1",
"qs": "^6.9.1",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-chartjs": "^3.5.0",
"vue-router": "^3.1.6",
"vuetify": "^1.5.21",
"vuetify-datetime-picker": "^1.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "^1.0.0-beta.32",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"jest": "^25.1.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.1",
"ts-jest": "^25.2.1",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
jest.config.js
module.exports = {
moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
transform: {
'.*\\.(js|jsx)$': 'babel-jest',
'.*\\.(ts|tsx)?$': 'ts-jest',
'.*\\.(vue)$': 'vue-jest'
},
verbose: true
};
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
};
Footer.test.js
import { mount } from '#vue/test-utils'
import Footer from './Footer'
describe('Footer', () => {
test('is a Vue instance', () => {
const wrapper = mount(Footer);
expect(wrapper.isVueInstance()).toBeTruthy();
})
});
Thank you very much for your support!