Vuejs 3 - what's the alternative of require.context in vitejs

Question

I'm looking for way to make the same logic of require.context of webpack in vitejs, I've found this plugin named vite-plugin-import-context, I tried it out but there's something that I didn't understand which is import dynamicImport from '../src/index' in the basic usage :

import { UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';

import dynamicImport from '../src/index';// <-- this is not described

export default (): UserConfigExport => {
  return {
    plugins: [vue(), dynamicImport(/*options*/)],
  };
};

Eisus · Accepted Answer · 2022-08-30 06:07:22Z

8

require should never be used in source code when using Vite. It's ESM only. For Vite v2, import.meta.globEager can be used. For Vite >v2, import.meta.globEager is deprecated. Use import.meta.glob('*', { eager: true }) instead.

answered Aug 30, 2022 at 6:07

Eisus

1011 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bereket Belete · Accepted Answer · 2021-05-27 14:12:33Z

3

import.meta.glob() is webpack alternative of require.context() . It has been added in vite since v2.3.4 .

Here is a link to the doc https://vitejs.dev/guide/features.html#glob-import

answered May 27, 2021 at 14:12

Bereket Belete

3744 silver badges7 bronze badges

Comments

Syed · Accepted Answer · 2023-01-13 13:33:04Z

Here is how I import all the plugins/modules:

main.ts

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// styles here
import '@/assets/styles/tailwind.css';
import '@/assets/styles/main.scss';

// install all modules under `modules/`
Object.values(
  import.meta.glob<{ install: (ctx: any) => void }>('/src/modules/*.ts', { eager: true })
).forEach((module) => module.install?.(app));

app.mount('#app');

and here is how I keep things ready in my modules folder to export:

modules/pinia.ts

import { createPinia } from 'pinia';

export const install = (app: any) => {
  app.use(createPinia());
};

modules/router.ts

import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHashHistory } from 'vue-router';

import generatedRoutes from '~pages';
import { setupLayouts } from 'virtual:generated-layouts';

const routes: RouteRecordRaw[] = setupLayouts(generatedRoutes);

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export const install = (app: any) => {
  app.use(router);
};

Michal Levý · Accepted Answer · 2021-01-13 11:37:19Z

1

Yep, that example is directly taken from examples folder in the repo so it works only in that repo.

If you install the plugin via npm or yarn, the line should look like import dynamicImport from 'vite-plugin-import-context'

answered Jan 13, 2021 at 11:37

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Comments

user2923339 · Accepted Answer · 2023-12-17 12:48:28Z

0

just use:

const iconsModule = import.meta.glob('@/path/*.svg');

then you can iterate through paths and get the file name with or without format name

for (const path in iconsModule) {
            const icon = path.split('/').slice(-1)[0];
            this.icons.push(icon);
        }

answered Dec 17, 2023 at 12:48

user2923339

1672 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vuejs 3 - what's the alternative of require.context in vitejs

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related