I have a Vue web component. When I build it as a normal Vue component everything worked fine. However, it lost all the Tailwind styling immediately I converted it to a Vue Web Component. Thanks for your help in advance.
tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
},
},
},
plugins: [
],
}
tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
and my vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes('-')
}
}
})],
build: {
lib: {
entry: './src/entry.js',
formats: ['es','cjs'],
name: 'web-component',
fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
},
sourcemap: true,
target: 'esnext',
minify: false
}
})
Anyway, for now, what I have done is to add Tailwind directly to the web component and it works.
<style>
#import url("../tailwind.css");
</style>
In src/main.js change import "./assets/main.css"; to your tailwind css file
`
Related
I have created a component as part of my component library that I am building with Vue3 and Vite. Everything works well, except when I try to use environment variables. I want the app that consumes this component library to be able to provide the component with environment specific data.
I have played around and found that if I have a .env file as part of the component library project, I am able to access those variables, but I want to be able to provide that during runtime and not during build time.
Here is my vite.config.ts
import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "#vitejs/plugin-vue";
import dts from "vite-plugin-dts";
export default ({ mode }) => {
return defineConfig({
optimizeDeps: {
exclude: ["vue-demi"],
},
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
],
server: {
open: true,
},
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "complib",
fileName: "complib",
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
exports: "named",
},
},
},
});
};
The entry looks like:
import { App, install } from "vue-demi";
import TestComp from "./components/TestComp.vue";
import "./tailwind.css";
install();
export default {
install: (app: App) => {
app.component("TestComp", TestComp);
},
};
export { Header };
And here is a minimal component TestComp.vue:
<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
console.log(import.meta.env.VITE_TEST_VAR);
});
</script>
<template>
<span>Test Comp</span>
</template>
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 installed storybook via the vue-cli and added a .scss file in my preview.js:
import "assets/scss/core.scss";
import Vue from "vue";
import CompositionApi from "#vue/composition-api";
Vue.use(CompositionApi);
where "assets" is an alias configured in my vue.config.js to refer to the src/assets path. According to the docs :
The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder.
So the path should ne correctly resolved, right ? However the style does not seem to be loaded as it is not applied to my components.
Am I missing something ?
FYI, here is my main.js:
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../../src/**/*.stories.#(js|jsx|ts|tsx|mdx)"],
addons: [
"#storybook/addon-essentials",
"#storybook/addon-links",
],
};
And my vue.config.js :
const path = require("path");
module.exports = {
configureWebpack: {
resolve: {
alias: {
//aliases go here
"#": path.resolve(__dirname, "src"),
assets: path.resolve(__dirname, "./src/assets"),
},
},
},
css: {
loaderOptions: {
scss: {
additionalData: `#import 'assets/scss/variables';`,
},
},
},
};
Thanks !
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 want to use Storybook in combination with Vue 3, SCSS and TailwindCSS.
I achieved to configure storybook that TailwindCSS is loading but it fails loading the appropriate component style.
In the .storybook Folder I added the following webpack.config.js:
const path = require('path');
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.scss$/,
use: [
require.resolve("vue-style-loader"),
require.resolve("css-loader"),
require.resolve("sass-loader")
],
});
config.module.rules.push({
test: /\.(css|scss)$/,
loaders: [
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: './.storybook/',
},
},
},
],
include: path.resolve(__dirname, '../storybook/'),
});
return config;
};
In the preview.js File in .storybook Folder I added the "Global" CSS to initialise Tailwind. (works fine tho)
import '../src/index.css'
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
And I added a postcss.config.js in the .storybook Folder.
var tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
require('postcss-import')(),
tailwindcss('../tailwind.config.js'),
require('autoprefixer'),
],
};
This setup is able to show / build stories but without the corresponding Vue Component Style.
An example component which I wanna preview in storybook is "Fact.vue".
<template>
<div class="fact"><slot /></div>
</template>
<script>
export default {};
</script>
<style lang="scss">
#use "./src/scss/atoms/fact.scss";
</style>
As you can see I #use the corresponding style
fact.scss:
.fact {
#apply font-bold text-4xl;
}
But how can I make sure that the style of the component is loaded correctly? According to Google Inspector, the #apply is not resolved correctly.