I have a vanilla project generated by vite, I wonder how to include .ttf Font in vite.config.js. I've installed vite-plugin-fonts
Here is the config file:
vite.config.js
import glsl from 'vite-plugin-glsl';
import { imagetools } from 'vite-imagetools';
import { VitePluginFonts } from 'vite-plugin-fonts'
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// font
server: {
https: false,
port: 1414,
},
});
How can I do this ?
Related
Hi guys I have the following turborepo configuration
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": [".svelte-kit/**", ".vercel/**"],
"env": ["PUBLIC_SUPABASE_URL", "PUBLIC_SUPABASE_ANON_KEY"]
},
"lint": {},
"dev": {
"cache": false,
"persistent": true
}
}
}
It's a simple project with 2 sveltekit websites, admin and client, both websites have a supabase instance and the client is defined like this
import { createClient } from '#supabase/auth-helpers-sveltekit';
import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
export const client = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY);
in development locally it works perfectly but in production it fails with a different error for each website, for admin the vite config is this
import { sveltekit } from '#sveltejs/kit/vite';
import type { UserConfig } from 'vite';
const config: UserConfig = {
plugins: [sveltekit()],
optimizeDeps: {
exclude: ['flowbite-svelte']
},
define: {
'process.env': process.env
}
};
export default config;
and the error is this:
admin:build: throw new Error('supabaseUrl is required.');
admin:build: ^
admin:build:
admin:build: Error: supabaseUrl is required.
admin:build: at new SupabaseClient (/vercel/path0/node_modules/.pnpm/#supabase+supabase-js#2.4.1/node_modules/#supabase/supabase-js/dist/main/SupabaseClient.js:55:19)
Which just means it is not seeing the variables
for client the vite config is this
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
and the error in vercel is this:
client:build: "PUBLIC_SUPABASE_URL" is not exported by "$env/static/public", imported by "src/lib/db.ts".
client:build: file: /vercel/path0/apps/client/src/lib/db.ts:2:35
client:build: 1: import { createClient } from '#supabase/auth-helpers-sveltekit';
client:build: 2: import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
client:build: ^
client:build: 3: export const client = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY);
client:build: error during build:
client:build: RollupError: "PUBLIC_SUPABASE_URL" is not exported by "$env/static/public", imported by "src/lib/db.ts".
client:build: at error (file:///vercel/path0/node_modules/.pnpm/rollup#3.7.3/node_modules/rollup/dist/es/shared/rollup.js:2001:30)
in both cases the issue is that the environment variables are not being loaded in both I don't understand why, I made sure the variables are configured correctly on vercel
I have a Laravel 9 application using Vite, VueJS 3, InertiaJS and Quasar. I installed Quasar with the Vite Plugin Doc here. Now my problem is that I want to use the Flex Addons to have responsive margin/padding Flex addon, but in the documentation it is written that it needs to be enabled through quasar.config.js > framework > cssAddon: true , but I don't have a quasar.config.js file. I only have a vite.config.js file and my app.js root file where I load Quasar.
So is there an other way to enable cssAddon with vite plugin ? And is there an other way to have responsive margin without enabling cssAddon ?
Thanks for your help :)
This is my app.js file
import './bootstrap';
import { createApp, h } from 'vue';
import { Quasar } from 'quasar';
import quasarLang from 'quasar/lang/fr';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import '#quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
import AppLayout from './Layouts/AppLayout.vue';
createInertiaApp({
resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(Quasar, {
plugins: {},
lang: quasarLang,
})
.mount(el);
}
})
This is my vite.config.js file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '#quasar/vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
//'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {},
},
}),
quasar({
sassVariables: 'resources/sass/quasar-variables.scss',
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
I tried to add cssAddon:true under Quasar in both files but it doesn't work.
I have nodeResolve set to only resolve svelte (since I only use stores) and string-argv
// rollup.config.js
import { nodeResolve } from '#rollup/plugin-node-resolve'
import { defineConfig } from 'rollup'
const config = defineConfig({
input: 'main.js',
output: {
file: 'bundle.js',
format: "esm"
},
plugins: [nodeResolve({
preferBuiltins: true,
resolveOnly: ['svelte', 'string-argv']
})],
external: ['cac', 'colors'],
})
export default config
but for some reason references to exports is included in my bundle and importing the module doesn't work. How do i fix this?
EDIT: i checked the string-argv code in node_modules and all the references to exports is in that module.
I want to use vite to pack my esm js to commonjs, but it will clear node modules.
vite.config.js
import { defineConfig } from 'vite';
const config = defineConfig({
envDir: process.cwd(),
build: {
lib: {
entry: 'index.js',
formats: ['cjs']
},
rollupOptions: {
output: {
entryFileNames: '[name].cjs'
}
},
emptyOutDir: true
}
});
export default config;
My example index.js
import Stream from 'node:stream';
console.log(`✨`, `Stream`, Stream);
When builded the stream will be an empty object.
How can I prevent node modules from being cleaned up?
I had a similar issue and solved it by specifying:
build: { ssr: true }
Then to eliminate the warning, you should also specify:
rollupOptions: {
input: 'index.js'
}
With vue-cli it was possible to configure webpack devServer.before function like this:
devServer: {
before(app) {
app.get('/apiUrl', (req, res) => res.send(process.env.API_URL))
}
},
How is it possible to configure Vite dev server to obtain the same behavior?
(I tried with the proxy option but it does not work.)
According to this github issue, environment variables are not accessible in file vite.config.js (neither in vite.config.ts). However, the discussion in this issue also mentions a workaround that you can use in this file:
import { defineConfig, loadEnv } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig(({mode}) => {
const env = loadEnv(mode, process.cwd());
return {
plugins: [
vue(),
],
server: {
proxy: {
'^/apiUrl': {
target: env.VITE_API_TARGET,
changeOrigin: true,
}
}
},
}
})
Note that the variable name must start with VITE_ for this to work.