{"id":13456,"library":"liferay-npm-bundler-preset-vue","title":"Liferay NPM Bundler Preset for Vue.js","description":"The `liferay-npm-bundler-preset-vue` package provides a specialized configuration preset for the `liferay-npm-bundler`, specifically tailored for Vue.js projects integrated within the Liferay DXP ecosystem. Currently at version 1.8.0, this package is typically released as part of the broader `liferay-npm-build-tools` suite, aligning its updates with Liferay DXP's release cycle rather than an independent cadence. Its core function is to streamline the build process for Vue.js applications by including pre-configured Babel presets, such as `babel-preset-liferay-standard`, and essential Liferay NPM Bundler plugins like `liferay-npm-bundler-plugin-replace-browser-modules`. This ensures proper transpilation, module resolution, and compatibility with Liferay's runtime environment, differentiating it from general-purpose Vue build tools by offering Liferay-specific optimizations and required polyfills for portlet and widget development.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-preset-vue","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-preset-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-preset-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a preset for the liferay-npm-bundler and requires it to function.","package":"liferay-npm-bundler","optional":false},{"reason":"Included as a core Babel preset for standard Liferay JavaScript compilation.","package":"babel-preset-liferay-standard","optional":false},{"reason":"Included as a bundler plugin for Liferay-specific module replacement and compatibility.","package":"liferay-npm-bundler-plugin-replace-browser-modules","optional":false}],"imports":[],"quickstart":{"code":"{\n    \"preset\": \"liferay-npm-bundler-preset-vue\"\n}","lang":"json","description":"This demonstrates how to enable the Vue.js preset within your `.npmbundlerrc` configuration file for the Liferay NPM Bundler."},"warnings":[{"fix":"Consult Liferay's official documentation for `liferay-npm-build-tools` and `liferay-npm-bundler` for compatibility matrices and migration guides when upgrading Liferay DXP or build tools versions.","message":"Major version updates to `liferay-npm-bundler` or `liferay-npm-build-tools` may introduce breaking changes requiring updates to the preset or its underlying dependencies. Always check the release notes for the `liferay-npm-build-tools` monorepo.","severity":"breaking","affected_versions":">=1.x"},{"fix":"Ensure your project is a Liferay DXP portlet or widget and is configured to use `liferay-npm-bundler` correctly. For non-Liferay projects, use standard Vue CLI or Vite configurations.","message":"This preset is designed exclusively for Vue.js projects targeting the Liferay DXP platform. Using it outside of the `liferay-npm-bundler` context or for generic Vue.js projects not deployed to Liferay DXP is not supported and will likely cause build issues or unnecessary overhead.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review your project's Babel configuration. Prioritize using the Liferay presets and only add custom configurations for specific, non-conflicting transformations. Test build outputs thoroughly.","message":"Conflicts can arise if custom Babel configurations in your project (`.babelrc`, `babel.config.js`) overlap or contradict the presets included by `liferay-npm-bundler-preset-vue` and `babel-preset-liferay-standard`. This can lead to unexpected transpilation errors or incorrect module outputs.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev liferay-npm-bundler-preset-vue` or `yarn add -D liferay-npm-bundler-preset-vue` to install the package. Double-check the spelling in your `.npmbundlerrc` file.","cause":"The package `liferay-npm-bundler-preset-vue` is not installed or the `preset` value in `.npmbundlerrc` is misspelled.","error":"Error: Cannot find module 'liferay-npm-bundler-preset-vue' from '...'"},{"fix":"Verify that `liferay-npm-bundler-preset-vue` is correctly loaded in `.npmbundlerrc`. Ensure there are no conflicting Babel configurations that might disable or override the Liferay standard preset. Upgrade to the latest compatible versions of Liferay build tools.","cause":"Indicates an issue with Babel transpilation, often due to an incorrect or missing `babel-preset-liferay-standard` configuration or conflicts with other Babel plugins, failing to correctly convert ES modules to CommonJS for Liferay's runtime.","error":"SyntaxError: Unexpected token 'export' (or other ES module error) in bundled output"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}