The environment variable name used in code must match the name set in the .env file: // .env VITE_API_KEY=abcd1234 👆 // firebase.js const firebaseConfig = { 👇 apiKey: import.meta.env.VITE_API_KEY, ⋮ } demo Relevant documentation can be found in the Vite Env variables docs
You can use vite-plugin-dts import dts from “vite-plugin-dts”; export default defineConfig({ plugins: [ dts({ insertTypesEntry: true, }), ],
Update 2023-03-20: Vite supports HTML Env replacement out of the box starting with version 4.2! So if that’s all you’re looking for, you should be set. Older answer: Wanted to do the same for a project. Used vite-plugin-html for a bit, but I ran into an issue with the plugin and the author of the … Read more
Vite is a litte bit different import { defineConfig } from ‘vite’ export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: ` @import “./src/styles/_animations.scss”; @import “./src/styles/_variables.scss”; @import “./src/styles/_mixins.scss”; @import “./src/styles/_helpers.scss”; ` } } } })
storeToRefs() You need to use storeToRefs() to extract properties from the store while keeping those properties reactive. import { storeToRefs } from ‘pinia’ const themeStore = useThemeStore(); const { isDark } = storeToRefs(themeStore); Computed property Thanks to @Fennec for suggesting the computed way of getting reactive state. Although I don’t recommend this method since there … Read more
Two steps, We can inject css into js assets with vite-plugin-css-injected-by-js. We can emit a single js asset by disabling chunks in rollup’s config. Final result, import cssInjectedByJsPlugin from “vite-plugin-css-injected-by-js”; export default defineConfig({ plugins: [cssInjectedByJsPlugin()], build: { rollupOptions: { output: { manualChunks: undefined, }, }, }, }); As suggested by @TheRockerRush below, you may want … Read more
You just have to specify the aliases in your vitest.config.js file: import path from ‘path’ import vue from ‘@vitejs/plugin-vue’ export default { plugins: [vue()], test: { globals: true, environment: ‘jsdom’, }, resolve: { alias: { ‘@’: path.resolve(__dirname, ‘./src’) }, }, }
Alternatively, you can use vite-bundle-visualizer, which uses rollup-plugin-visualizer: npx vite-bundle-visualizer Usage # In your vite project’s root $ npx vite-bundle-visualizer # Then open stats.html in browser $ npx vite-bundle-visualizer –help vite-bundle-visualizer Usage: $ vite-bundle-visualizer <command> [options] Options: –template -t <template> Template to use, options are “raw-data” (JSON), “treemap”, “list” (YAML), “sunburst” and “network” (default: treemap) … Read more
Try adding this code to your vite.config.js file: import { defineConfig } from “vite”; export default defineConfig({ … optimizeDeps: { exclude: [‘js-big-decimal’] } }); then delete your node_modules folder and reinstalled all your deps. There’s an ongoing discussion on this issue on github vite github issue.
You can try vite-plugin-node. This vite plugin supports multiple nodejs frameworks out of the box including koa. I have created a simple express app with it in typescript which worked fine for me. One downside is the plugin is fairly new and still in its early stage, so you may not want to use it … Read more