Develop Reference

Vue 3 Vite loading Vuetify/Element plus components in Root not working

I'm trying to load vuetify or element plus components directly into #app.
It only works if I import all components, which of course means a huge file.
If I do manual or automatic import then I get :
Failed to resolve component:
I'm probably missing something in Vite but I can't figure it out.
If I load demo.vue then it works fine.
//Main.js
import { createApp } from 'vue/dist/vue.esm-bundler';
app.component('demo', Demo);
app.mount('#app');
//demo.vue
<el-collapse v-model="activeName" accordion>
<el-collapse-item :title="test" name="1">
<div>
AAA
</div>
<div>
AAA
</div>
</el-collapse-item>
</el-collapse>
If I load the contents of demo.vue in root #conatiner then error, but if I load all components then it works.
import { createApp } from 'vue/dist/vue.esm-bundler';
const app = createApp({
mounted() {
console.log('The app is working')
}
});
const app2 = createApp(App)
app2.mount('#container')
My vite-config
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
//base: '/dist/',
plugins: [
vue({
}), AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
], resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
},
}, build: {
outDir: '../wwwroot/distback',
rollupOptions: {
input: {
front: fileURLToPath(new URL('./qasar/index.html', import.meta.url)),
},
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
},
define: { 'process.env': {} },
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 5000,
},
})

Module Federation Angular in React Shell

I want to use angular app inside react app using module federation.
I found a way to use angular's app.component in React. But I can't use other components.
I am sharing the codes below.
Angular webpack config
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("#angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), [
]);
module.exports = {
output: {
uniqueName: "mfeRemote",
publicPath: "auto",
scriptType: "text/javascript",
},
optimization: {
runtimeChunk: false,
},
resolve: {
alias: {
...sharedMappings.getAliases(),
},
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "mfeRemote",
filename: "remoteEntry.js",
exposes: {
"./AppModule": "./src/loadApp.ts",
"./DashComp": "./src/app/external/dashboard/dashboard.component.ts",
},
shared: share({
"#angular/core": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"#angular/common": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"#angular/common/http": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"#angular/router": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
...sharedMappings.getDescriptors(),
}),
}),
sharedMappings.getPlugin(),
],
};
loadApp.ts
import 'zone.js';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const mount = () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
};
export { mount };
React Craco config
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
const deps = require("./package.json").dependencies;
module.exports = {
plugins: [
{
plugin: {
overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => {
return cracoConfig;
},
overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
webpackConfig.plugins = [
...webpackConfig.plugins,
new ModuleFederationPlugin({
name: "app",
remotes: {
appModule: "mfeRemote#http://localhost:3002/remoteEntry.js",
},
shared: {
...deps,
"react-dom": {
singleton: true,
eager: true,
},
react: {
singleton: true,
eager: true,
},
},
}),
];
return webpackConfig;
},
overrideDevServerConfig: ({
devServerConfig,
cracoConfig,
pluginOptions,
context: { env, paths, proxy, allowedHost },
}) => {
return devServerConfig;
},
overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => {
return jestConfig;
},
},
},
],
};
React using App-Component (is Work)
import React, { useEffect, useRef } from "react";
import { mount } from "appModule/AppModule";
const RemoteAppModule = () => {
const ref = useRef(null);
useEffect(() => {
mount();
}, []);
return (
<div className="remote-module">
<app-root></app-root>
</div>
);
};
export default RemoteAppModule;
React using Other Comp (not Work)
import React from "react";
let DashComp = React.lazy(() =>
import("appModule/DashComp").then((module) => {
// this row for -> class component without new
let ExtModule = new module.DashboardComponent();
return { default: ExtModule };
})
);
const RemoteExtModule = () => {
return (
<div>
<React.Suspense fallback="...loading">
<DashComp />
</React.Suspense>
</div>
);
};
export default RemoteExtModule;
Error
enter image description here
------------------UPDATE ------------------------------------------
i solved my problem different way. I used multiple bootstrap module .
check my repo :
https://github.com/scerci/mfe-angular-react

CSS import not working in .storybook/preview.js after adding 'storybook-addon-next',

Hi I am using Storybook 6.4.22 with Next 12.1.5 and Typescript 4.4.2(Node 16). I have to add global fonts for our stories. I tried adding that in preview.js and it worked fine initially. I had to use 'storybook-addon-next' because some of our components are pulling info out of configs(getConfig()?.serverRuntimeConfig?.config). After adding the addon my global import of fonts has stopped working.
Thanks in advance for your help.
storybook/Main.js
module.exports = {
stories: ['../src//*.stories.mdx', '../src//*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
'storybook-addon-tags',
'storybook-addon-next',
],
framework: '#storybook/react',
core: {
builder: '#storybook/builder-webpack5',
},
}
storybook/preview.js
import '#UI/palette/build/web/fonts/fonts-cdn.css' //css import
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}

Is it possible to make a library of Vue highcharts components?

I am just desperate for an answer but there's a hope to find the answer here.
I Used following stuff:
"vite": "^2.7.13",
"highcharts": "^9.3.3",
"highcharts-vue": "^1.4.0"
I would like to make a library of vue components including highcharts charts. I tried to make BarChart with rollup config like this:
import vue from "rollup-plugin-vue";
import typescript from "rollup-plugin-typescript2";
import resolve from "rollup-plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import cleaner from "rollup-plugin-cleaner";
import commonjs from "#rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import image from '#rollup/plugin-image';
const plugins = [
resolve(),
typescript({
check: false,
useTsconfigDeclarationDir: true,
}),
vue({
preprocessStyles: true,
css: false,
template: {
isProduction: true,
},
}),
peerDepsExternal(),
commonjs(),
postcss({
extensions: [".css"],
}),
image(),
];
const AppChart = [
{
input: "./demo-v3/src/components/Chart.vue",
output: [
{
format: "esm",
file: "./demo-v3/lib/UI/AppChart/index.js",
},
],
external: ["#vue"],
plugins: [...plugins, commonjs({
namedExports: {
"node_modules/highcharts-vue/dist/highcharts-vue.min.js": ["Chart"],
},
}),],
},
];
const config = [...AppChart];
export default config;
My component BarChart.vue looks like this:
<template>
<div class="chart-wrapper">
<Chart :chart-options="lineChartOptions" />
</div>
</template>
<script setup lang="ts">
import Chart from "./CommonChart.vue";
const props = defineProps({
chartData: {
type: Object,
// eslint-disable-next-line #typescript-eslint/no-empty-function
default: () => {},
},
});
const exportingOptions = () => {
return {
buttons: {
contextButton: {
menuItems: [
"viewFullscreen",
"separator",
"downloadPNG",
"downloadPDF",
"printChart",
"separator",
"downloadCSV",
"downloadXLS",
],
},
},
};
};
let lineChartOptions = {
...props.chartData,
exporting: exportingOptions(),
credits: { enabled: false },
};
</script>
<style lang="scss">
.chart-wrapper {
padding: 15px;
width: 1140px;
height: 440px;
border: 1px solid #c4c4c4;
}
</style>
And there is a common chart component looks like this:
<template>
<highcharts class="hc" :options="chartOptions" />
</template>
<script setup lang="ts">
import { Chart as highcharts } from "highcharts-vue";
import Highcharts from "highcharts";
const props = defineProps({
chartOptions: {
type: Object,
// eslint-disable-next-line #typescript-eslint/no-empty-function
default: () => {},
},
});
</script>
It works when I use BarChart and doesn't work after bundling with rollup.
What can I do wrong?

my colleague found this guide with the setup which is worked for me.
I leave it here for who can't find the same:
https://dev.to/shubhadip/vue-3-component-library-270p
UPDATED:
https://devsday.ru/blog/details/73660 - vite can build lib out-of-box. I haven't tried this way but suspect it works well. As always, I should look throw documentation carefully

Implementing Stripe on Nuxt App - StripeCheckout not found in 'vue-stripe-checkout'

I'm trying to implement stripe on my NuxtJS App but I'm facing this error :
StripeCheckout not found in 'vue-stripe-checkout'.
I was trying to follow along this tuto :
https://github.com/jofftiquez/vue-stripe-checkout#demo
Here is what I did so far :
Install vue-stripe-checkout package
Declare plugin in my Nuxt.config.js
plugins: [
{ src: "~/plugins/stripeCheckOut.js", ssr: false }
build: {
extend(config, ctx) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
options: {
fix: true
}
});
},
transpile: ["/plugins"]
}
};
Create a plugin
import Vue from 'vue'
import VueStripeCheckout from 'vue-stripe-checkout'
const options = {
key:
'MY KEY', // STRIPE_TOKEN,
locale: 'auto',
currency: 'EUR'
}
Vue.use(VueStripeCheckout, options)
And finaly call this new plugin in my component :
<template>
<div>
<h1>Voici un récapitulatif de votre commande:</h1>
<stripe-checkout
ref="checkoutRef"
:pk="publishableKey"
:items="items"
:success-url="successUrl"
:cancel-url="cancelUrl"
>
<template slot="checkout-button">
<button #click="checkout">
Shut up and take my money!
</button>
</template>
</stripe-checkout>
</div>
</template>
<script>
import { StripeCheckout } from 'vue-stripe-checkout'
export default {
name: 'RecapPrice',
components: {
StripeCheckout
},
data: () => ({
loading: false,
publishableKey: process.env.PUBLISHABLE_KEY,
items: [
{
sku: 'sku_FdQKocNoVzznpJ',
quantity: 1
}
],
successUrl: 'your-success-url',
cancelUrl: 'your-cancel-url'
}),
methods: {
checkout () {
console.log('coucou')
this.$refs.checkoutRef.redirectToCheckout()
}
}
}
</script>
If someone as already implemented Stripe in a Nuxt App, I'd get very happy to get some of your insights
Thanks a lot !