Skip to content

[Vue] Replace Webpack with Vite #22356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cconard96 wants to merge 6 commits into
base: main
Choose a base branch
from
+4,051 −2,430
Open

[Vue] Replace Webpack with Vite #22356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
53651a2
bundle Vue code with Vite
cconard96 Dec 13, 2025
95e1489
vite 8 official release
cconard96 Mar 12, 2026
30083fc
support other ports
cconard96 Mar 12, 2026
8e41e2e
change manifest path
cconard96 Mar 12, 2026
5bef29c
do not force url prefix if absolute
cconard96 Mar 13, 2026
ed41162
drop banner in built code
cconard96 Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 0 additions & 78 deletions .vue.webpack.config.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default [
},
{
// Modules
files: ["js/modules/**", "eslint.config.mjs"],
files: ["js/modules/**", "eslint.config.mjs", "vite.config.js"],
languageOptions: {
sourceType: "module"
}
Expand Down Expand Up @@ -169,7 +169,7 @@ export default [
},
{
// Config files
"files": ["eslint.config.mjs", ".stylelintrc.js", ".webpack.config.js", ".vue.webpack.config.js", "tests/cypress.config.js"],
"files": ["eslint.config.mjs", ".stylelintrc.js", ".webpack.config.js", ".vue.webpack.config.js", "tests/cypress.config.js", "vite.config.js"],
"languageOptions": {
"globals": {...globals.node}
},
Expand Down
22 changes: 7 additions & 15 deletions js/src/vue/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
* ---------------------------------------------------------------------
*/

import { createApp } from 'vue/dist/vue.esm-bundler.js';
import * as vue from "vue";

let existing_components = {};
Expand All @@ -41,7 +40,7 @@ if (window.Vue !== undefined && window.Vue.components !== undefined) {
window.Vue = {
createApp: (...args) => {
// pass arguments directly to createApp
const app = createApp(...args);
const app = vue.createApp(...args);
// add default global properties so they can be used within the templates
app.config.globalProperties.__ = __;
app.config.globalProperties._n = _n;
Expand All @@ -61,26 +60,19 @@ window.Vue = {
return components;
},
};
// Require all Vue SFCs in js/src directory
const component_context = import.meta.webpackContext('.', {
regExp: /\.vue$/i,
recursive: true,
mode: 'lazy',
chunkName: '/vue-sfc/[request]'
});

/* global __webpack_public_path__ */
// eslint-disable-next-line no-global-assign
__webpack_public_path__ = `${CFG_GLPI.root_doc + __webpack_public_path__}/`;
const component_context = import.meta.glob('./**/*.vue', { as: 'component', eager: false });

// Register components globally
const components = {};
component_context.keys().forEach((f) => {
// Ex: ./Debug/Toolbar.vue => DebugToolbar
Object.keys(component_context).forEach((f) => {
// Ex: ./Debug/Toolbar.vue => Debug/Toolbar
const component_name = f.replace(/^\.\/(.+)\.vue$/, '$1');
components[component_name] = {
component: vue.defineAsyncComponent(() => component_context(f)),
component: vue.defineAsyncComponent(component_context[f]),
};
});

// Save components in global scope
window.Vue.components = Object.assign(window.Vue.components, components);

Expand Down
Loading
Loading