A webpack vue config for nextcloud apps

nextcloud, vue, vuejs, webpack, config, stylelint, eslint, configuration
npm install @nextcloud/webpack-vue-config@5.1.0


npm last version Dependabot status

Webpack vue base config

Use this base config package to cleanup all your complicated setups and rely on automated dependencies updates.


// webpack.js

const webpackConfig = require('@nextcloud/webpack-vue-config')

module.exports = webpackConfig
// package.json

	"scripts": {
		"build": "NODE_ENV=production webpack --progress --config webpack.js",
		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
		"serve": "NODE_ENV=development webpack serve --progress --config webpack.js",

Hot module replacement

To enjoy hot module replacement, follow those instructions:

  • Install the HMREnabler server app. This will tweak the CSP header so do not use it in production !
  • Add the serve script to your package.json as listed above.
  • Add js/*hot-update.* to you .gitignore. This is necessary because we write every files on disk so the nextcloud server can serve them.
  • Add the following line in your Vue app entry file so Webpack knows where to fetch updates, see this example. You might not need it as it default to /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.

If your nextcloud hostname is different from localhost, you need to start the server like so:

npm run serve -- --allowed-hosts your-hostname.example

Extend with your own configs

Here is an example on how to add your own config to the base one

// webpack.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

Replace/edit existing rule

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 overrride a rule that is already provided by this package, you can use the following to replace it:

// webpack.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([

// Replaces rules array
webpackConfig.module.rules = Object.values(webpackRules)

module.exports = webpackConfig