@nextcloud/webpack-vue-config
Advanced tools
Use this base config package to cleanup all your complicated setups and rely on automated dependencies updates.
// webpack.config.js
const webpackConfig = require('@nextcloud/webpack-vue-config')
module.exports = webpackConfig
// package.json
...
"scripts": {
"build": "webpack --node-env production --progress",
"dev": "webpack --node-env development --progress",
"watch": "webpack --node-env development --progress --watch",
"serve": "webpack --node-env development serve --progress",
}
...
This package supports both Vue 2 and Vue 3 by installing legacy vue-loader for Vue 2 in a postinstall script.
In Vue 2 it may result in different vue-loader version in the package-lock.json and node_modules.
In case of npm error code ENOTEMPTY - remove node_modules and try again:
# In case of "npm error code ENOTEMPTY" in Vue 2
rm -rf node_modules
To avoid any errors and have explicitly specified vue-loader - install it as dependency:
# Install legacy vue-loader for Vue 2
npm i -D vue-loader@legacy
To enjoy hot module replacement, follow those instructions:
HMREnabler server app. This will tweak the CSP header so do not use it in production !serve script to your package.json as listed above.js/*hot-update.* to you .gitignore. This is necessary because we write every files on disk so the nextcloud server can serve them./apps/<your_app_name>/js/.__webpack_public_path__ = generateFilePath(appName, '', 'js/')
You can then start you dev serve with npm serve or make serve-js if you added this step in your makefile.
localhost. In that case, you will need specify it with --allowed-hosts./apps/{app-name}/js. In that case, you will need to specify it with --static-public-path.npm run serve -- --allowed-hosts your-hostname.example [other-hostname.example ...] --static-public-path /your/custom/public/path
Here is an example on how to add your own config to the base one
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const webpackConfig = require('@nextcloud/webpack-vue-config')
webpackConfig.entry['files-action'] = path.join(__dirname, 'src', 'files_action.js')
webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
module.exports = webpackConfig
All the rules are available individually on the @nextcloud/webpack-vue-config/rules file. You can import them and use the one you want.
If you want to override a rule that is already provided by this package, you can use the following to replace it:
// webpack.config.js
const webpackConfig = require('@nextcloud/webpack-vue-config')
const webpackRules = require('@nextcloud/webpack-vue-config/rules')
const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
// Edit JS rule
webpackRules.RULE_JS.test = /\.m?js$/
webpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
'@nextcloud/dialogs',
'@nextcloud/event-bus',
'camelcase',
'fast-xml-parser',
'hot-patcher',
'semver',
'vue-plyr',
'webdav',
'toastify-js',
])
// Replaces rules array
webpackConfig.module.rules = Object.values(webpackRules)
module.exports = webpackConfig
v6.3.0 (2025-04-08)
This package now supports both Vue 2 and Vue 3 by installing legacy vue-loader for Vue 2 in a postinstall script.
In Vue 2 it may result in different vue-loader version in the package-lock.json and node_modules.
In case of npm error code ENOTEMPTY - remove node_modules and try again:
# In case of "npm error code ENOTEMPTY" in Vue 2
rm -rf node_modules
To avoid any errors and have explicitly specified vue-loader - install it as a dependency:
# Install legacy vue-loader for Vue 2
npm i -D vue-loader@legacy
FAQs
A webpack vue config for nextcloud apps
We found that @nextcloud/webpack-vue-config demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 13 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.