I was stuck with this for a while.
The official site gave this:
// Delimiters changed to ES6 template string style
app.config.compilerOptions.delimiters = ['${', '}']
but it doesn't work for build setup only as mentioned in the site.. it only works for standalone vue.js
Posting #Emperorsum's own answer here:
Anyway this finally worked:
Editing vite.config.js thus:
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template:{
compilerOptions: {
delimiters: ["[[","]]"]
}
}
})],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
})
Related
Hellođź‘‹
I'm trying to build a web app that shows all the countries in the world with their information, upon clicking on a country the user will be redirected to a different page with detailed information of the clicked country.
So the point is when i use the build function to create the production code, the second html(the country page where detailed info is given) file isn't built,
my repo: MY REPOSITORY
this is how my directory is:
root
--vite.config.js
--node_modules
--public
--scss
--package.json
--package-lock.json
--src
----index.html
----App.vue
----main.js
----components (not inportant)
----country
--------country.js
--------country.html
--------AppCountry.vue
this is my vite.config.js file
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { resolve } from 'node:path'
// https://vitejs.dev/config/
export default defineConfig({
// base: "/countries-api/",
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
},
build:{
rollupOptions:{
input:{
main:resolve(__dirname, 'index.html'),
country:resolve(__dirname, 'src/country/country.html')
},
external:[
resolve(__dirname, 'src/country/country.js')
],
},
watch:{
}
}
})
I am creating a Vue component library with Rollup, but when I use slots it gives me the following error:
Uncaught (in promise) TypeError: currentRenderingInstance is null
I made a very simple component in my library:
<script setup></script>
<template>
<button>
<slot></slot>
</button>
</template>
<style scoped></style>
Then I simply use it like this:
<ExampleComponent>
Text
</ExampleComponent>
If I remove the slot and replace it with a prop or hard-coded text, everything works fine.
This is my rollup.config.js:
import { defineConfig } from 'rollup';
import path from 'path';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import vue from 'rollup-plugin-vue';
// the base configuration
const baseConfig = {
input: 'src/entry.js',
};
// plugins
const plugins = [
vue(),
resolve({
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
}),
// process only `<style module>` blocks.
postcss({
modules: {
generateScopedName: '[local]___[hash:base64:5]',
},
include: /&module=.*\.css$/,
}),
// process all `<style>` blocks except `<style module>`.
postcss({ include: /(?<!&module=.*)\.css$/ }),
commonjs(),
];
const external = ['vue'];
const globals = {
vue: 'Vue',
};
export default [
// esm
defineConfig({
...baseConfig,
input: 'src/entry.esm.js',
external,
output: {
file: 'dist/vue-my-lib.esm.js',
format: 'esm',
exports: 'named',
},
plugins,
}),
// cjs
defineConfig({
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-my-lib.ssr.js',
format: 'cjs',
name: 'VueMyLib',
exports: 'auto',
globals,
},
plugins,
}),
// iife
defineConfig({
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-my-lib.min.js',
format: 'iife',
name: 'VueMyLib',
exports: 'auto',
globals,
},
plugins,
}),
];
Any idea about the problem?
After a whole day of searching, I found the solution (here and here). It's a problem with using a library locally (e.g., through npm link) where it seems there are two instances of Vue at the same time (one of the project and one of the library). So, the solution is to tell the project to use specifically its own vue through webpack.
In my case, I use Jetstream + Inertia, so I edited webpack.mix.js:
const path = require('path');
// ...
mix.webpackConfig({
resolve: {
symlinks: false,
alias: {
vue: path.resolve("./node_modules/vue"),
},
},
});
Or if you used vue-cli to create your project, edit the vue.config.js:
const { defineConfig } = require("#vue/cli-service");
const path = require("path");
module.exports = defineConfig({
// ...
chainWebpack(config) {
config.resolve.symlinks(false);
config.resolve.alias.set("vue", path.resolve("./node_modules/vue"));
},
});
Thanks to #mikelplhts
On vite + esbuild I used:
export default defineConfig({
...
resolve: {
alias: [
...
{
find: 'vue',
replacement: path.resolve("./node_modules/vue"),
},
],
},
...
I am working on a capacitor app and it works fine both on browser and android phones but for one page when it's routed to it gets stuck on ios.
I have tried to check and saw it's because some files are not loading
This is my vite config
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import nodeResolve from '#rollup/plugin-node-resolve'
import json from '#rollup/plugin-json'
import alias from '#rollup/plugin-alias'
import vuetify from '#vuetify/vite-plugin'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
}),
alias(),
],
define: {
'process.env': {}
},
build: {
rollupOptions: {
transformAssetsUrls: {
img: ['src', 'data-src']
},
plugins: [
nodeResolve({
browser: true,
preferBuiltins: false
}),
json()
]
}
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
'#': path.resolve(__dirname, 'src'),
},
},
server: {
fs: {
// Allow serving files from one level up to the project root
strict: false
}
},
css: {
preprocessorOptions: {
// global scss import
scss: {
charset: false,
additionalData: `
#import "#/styles/variables";
#import "#/styles/mixins.scss";
`
}
}
}
})
And this is how I am loading the images located inside src/assets folder:
I am using vue 3, vite 2.7 and capacitor 3
Update:
I'm not sure what was happening but the issue was occurring when I used vue <component /> tag. I fixed it by rewriting that part
You probably fixed this but since we fixed our, i'd like to share our solution.
We're building an app for iOS and Android using Quasar.js v2, vue3 and capacitor.
We had a similar problem when we built to production for iOS and Android.
In order To fix this we had to add viteConf.base = '/' in the build object in the quasar config file (which replaces vite.config.js), doc for base shared options here
build: {
extendViteConf (viteConf, { isServer, isClient }) {
viteConf.base = '/'
}...
Dependencies in package.json
"#capacitor-community/firebase-analytics": "^1.0.1",
"#capacitor/app": "^1.0.7",
"#capacitor/clipboard": "^1.0.2",
"#capacitor/device": "^1.1.1",
"#capacitor/keyboard": "^1.2.2",
"#capacitor/push-notifications": "^1.0.9",
"#capacitor/share": "^1.0.7",
"#capgo/capacitor-updater": "^3.3.12",
"#quasar/app-vite": "^1.0.5",
"#quasar/extras": "^1.14.3",
"quasar": "2",
"vue": "3",
Hope this can help
I have a Vue2 project with Webpack, and I'm trying to switch from Webpack to Vite.
In webpack.common.js, I have multiple entry points:
module.exports = {
entry: {
appSchool: './resources/school/app.js',
appStudent: './resources/student/app.js',
appAuth: './resources/auth/app.js'
},
...
}
How do I write this in vite.config.js?
Vite uses Rollup under the hood, and you can configure Rollup through build.rollupOptions, and then Rollup's input option:
// vite.config.js
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
appSchoool: fileURLToPath(new URL('./resources/school/index.html', import.meta.url)),
appStudent: fileURLToPath(new URL('./resources/student/index.html', import.meta.url)),
appAuth: fileURLToPath(new URL('./resources/auth/index.html', import.meta.url)),
},
},
},
})
Note the entry points refer to index.html files, which themselves link to the app.js in their corresponding directories (e.g., ./resources/student/index.html contains <script src="./app.js">). The input config also accepts the app.js file directly, but no HTML would be generated.
demo
I have setup a new vue project and added storybook to the project. When I have components that use the #/components path, it does not run correctly.
Can't resolve '#/components/EntityGrid/EntityGrid.Component.vue'
I have tried multiple webpack.config.js without any luck. What is the simplest webpack.config.js to fix this
This is happening in the default configuration without a webpack.config.js.
I managed to resolve this issue by adding the following in .storybook/main.js
const path = require("path");
module.exports = {
stories: ['./../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
...
webpackFinal: async (config) => {
config.resolve.alias = {
...config.resolve.alias,
"#": path.resolve(__dirname, "../src/"),
};
// keep this if you're doing typescript
// config.resolve.extensions.push(".ts", ".tsx");
return config;
},
}
Here are some useful links to help provide further context:
StoryBook docs for webpackFinal - gives you the first clue as to how you might go about configuring your webpack configuration
And then this solution
on an issue in Github provided the final piece of the puzzle
I have no idea what the cause for your issue is, but here is my working vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config.module
.rule("i18n")
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use("i18n")
.loader("#kazupon/vue-i18n-loader")
.end();
},
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'#': path.join(__dirname, '/src')
}
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
]
},
},
css: {
loaderOptions: {
sass: {
data: `#import "#/assets/sass/_variables.scss"; #import "#/assets/sass/_mixins.scss";`,
}
}
}
}
Just ignore all the stuff that you dont need