meteor-vite

Use Vite in your Meteor app! ⚡️

Roadmap

• Development mode
• Build
• Importing non-core Meteor packages
• Lazy meteor packages
• Reify support
  • Named exports
  • Default exports
  • Re-exports (named + wildcard)
  • Re-exports via intermediary variable (not tested)
• Code-splitting/Dynamic imports
• SSR (not tested)
• Galaxy deployment link

Installation

meteor add vite:bundler && meteor npm i -D vite

You can also install any vite plugin, for example @vitejs/plugin-vue:

meteor npm i -D @vitejs/plugin-vue

Make sure to have an import client entry (meteor.mainModule.client) in your package.json:

1{
2  "name": "my-app",
3  "private": true,
4  "scripts": {
5    "dev": "meteor run",
6    "build": "meteor build ../output/vue --directory"
7  },
8  "dependencies": {
9    "@babel/runtime": "^7.17.9",
10    "meteor-node-stubs": "^1.2.1",
11    "vue": "^3.2.37"
12  },
13  "devDependencies": {
14    "@types/meteor": "^1.4.87",
15    "@vitejs/plugin-vue": "^3.0.3",
16    "typescript": "^4.6.3",
17    "vite": "^3.0.9"
18  },
19  "meteor": {
20    "mainModule": {
21      "client": "client/main.ts",
22      "server": "server/main.ts"
23    },
24    "testModule": "tests/main.js"
25  }
26}

You can leave your Meteor client entry file empty, but it's necessary to enable Meteor import mode. In the example above, we can create an empty client/main.ts file.

Create a Vite configuration file (vite.config.js) in your project root:

1import { defineConfig } from 'vite'
2// Example with Vue
3import vue from '@vitejs/plugin-vue'
4
5export default defineConfig({
6  plugins: [
7    vue(),
8  ],
9  // Other vite options here...
10})

As we don't use a standard Vite index.html file, we need to specify an entry point (different from the Meteor one):

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3
4export default defineConfig({
5  plugins: [
6    vue(),
7  ],
8
9  meteor: {
10    clientEntry: 'imports/ui/main.ts',
11  },
12})

You can then write your code from this entry point and it will be handled by Vite! ⚡️