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
Related
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$/,
},
},
}
I want to customize themes in Vuetify using Storybook 6 and I am using #socheatsok78/storybook-addon-vuetify package https://storybook.js.org/addons/#socheatsok78/storybook-addon-vuetify
I did exactly what documentation says but theme is still not working at all. I want to configure vuetify with custom properties and with my own color palette.
preview.js
import '!style-loader!css-loader!sass-loader!./main.scss';
import {
withVuetify,
withThemeProvider,
} from '#socheatsok78/storybook-addon-vuetify/dist/decorators';
import minifyTheme from 'minify-css-string';
export const globalTypes = {
theme: {
dark: false,
options: {
customProperties: true,
minifyTheme,
},
themes: {
light: {
primary: '#007BBF',
secondary: '#008574',
},
dark: {
primary: '#f099aa',
},
},
},
};
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
export const decorators = [withThemeProvider, withVuetify];
main.js
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-docs',
'#storybook/addon-essentials',
'#storybook/preset-scss',
'#socheatsok78/storybook-addon-vuetify',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, 'main.scss'),
},
},
],
sideEffects: true,
include: path.resolve(__dirname, '../'),
});
return config;
},
};
Ok I fixed the theme, you can find an tutorial how to do this and with all working code down below.
I found a great explanation here:
https://morphatic.com/2020/09/30/configuring-storybook-6-for-vue-2-vuetify-2-3/
preview.html
import '!style-loader!css-loader!sass-loader!./main.scss';
import { withVuetify } from '#socheatsok78/storybook-addon-vuetify/dist/decorators';
import vuetify from './vuetify';
import Vue from 'vue';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
export const decorators = [
(story, context) => {
const wrapped = story(context);
return Vue.extend({
vuetify,
components: { wrapped },
template: `
<v-app>
<v-container fluid>
<wrapped/>
</v-container>
</v-app>
`,
});
},
withVuetify,
];
main.js
I removed one line from addons
'#socheatsok78/storybook-addon-vuetify',
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import minifyTheme from 'minify-css-string';
import theme from './theme';
import LRU from 'lru-cache';
const themeCache = new LRU({
max: 10,
maxAge: 1000 * 60 * 60, // 1 hour
});
Vue.use(Vuetify);
export default new Vuetify({
theme: {
options: {
customProperties: true,
minifyTheme,
themeCache,
},
themes: {
light: theme,
},
},
});
theme.js
export default {
// ... other colors
primary: '#007BBF',
};
Theme works perfect now, only variables are not loaded correctly and I don't know how to solve this, you can read about it in the article comments
I am having issues trying to make vue-splide work outside of nuxt dev, after generating the static or the spa, it doesn't work properly.
Changing the target in nuxt.config.js from static to SPA doesn't solve the problem.
Instead of using nuxt generate I also tried nuxt build and the results are the same.
The two pictures are here:
The slider is working only in one of them, as it can be seen.
Any help on making it work properly so I can deploy the site?
nuxt.config.js
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Visgrow Internships',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,500;1,300;2,100&display=swap' },
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [{ src: '~/plugins/splide.client.js', ssr: false }],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios'
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
splide.client.js
import Vue from 'vue';
import VueSplide from '#splidejs/vue-splide';
// import '#splidejs/splide/dist/css/splide.min.css';
// Importing the original CSS does not change a thing. Also, I import the above CSS in the bellow css
import '../plugins-css/splide.css';
Vue.use(VueSplide);
new Vue({
el: '#app',
render: h => h(App),
});
Tried it on my side, working perfectly fine.
Install the package with either yarn or npm.
yarn add #splidejs/vue-splide
Setup the plugin in the usual way.
vue-splide.client.js
import VueSplide from '#splidejs/vue-splide'
import Vue from 'vue'
import '#splidejs/splide/dist/css/themes/splide-sea-green.min.css'
Vue.use(VueSplide)
Import the plugin in plugins, no need to use ssr: false (it actually does not exist anymore) nor mode since you went to suffix the file with client.js.
export default {
ssr: false,
target: 'static',
plugins: ['~/plugins/vue-splide.client.js'],
...
}
Then, using it in a view is perfectly fine, styling aside.
pages/index.vue
<template>
<div>
<splide class="custom">
<splide-slide>
<img src="https://source.unsplash.com/weekly?water" />
</splide-slide>
<splide-slide>
<img src="https://source.unsplash.com/weekly?fire" />
</splide-slide>
<splide-slide>
<img src="https://source.unsplash.com/weekly?earth" />
</splide-slide>
</splide>
</div>
</template>
<style scoped>
.splide__slide {
height: 50vh;
margin: 0 auto;
}
.custom {
height: 50vh;
width: auto;
}
</style>
For the project, I went with ssr: false and target: 'static' (PS: target: SPA does not exist) so, I then need to do
yarn generate
yarn start
And here is the result
I've started a Vue 3 project (currently not much more than a boilerplate with TypeScript) and tried to add i18n to it.
As far as I've got, vue-i18n does not work properly with Vue 3; but vue-i18n-next should.
here is my main.ts
import { createApp } from "vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { createI18n } from 'vue-i18n'
import App from "./App.vue";
//import en from "./locale/en.json"
//import ru from "./locale/ru.json"
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ru: {
message: {
hello: 'Таки здравствуйте'
}
}
}
const i18n = createI18n({
locale: 'ru',
/* messages: {
en,
ru
},*/
messages,
fallbackLocale: 'en'
})
const app = createApp(App)
.use(store)
.use(router)
.use(i18n);
.mount("#app");
here is my App.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<div>{{ $t("message.hello") }}</div>
<router-view />
</template>
However, I get a warning
[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'message.hello'.
Indeed I've found and installed #intlify/message-compiler - but don't have any idea on using it.
my webpack.config.js is taken from examples
const path = require("path");
module.exports = {
rules: [
{
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
type: "javascript/auto",
loader: "#intlify/vue-i18n-loader",
include: [
// Use `Rule.include` to specify the files of locale messages to be pre-compiled
path.resolve(__dirname, "./src/locale"),
],
},
],
};
my vue.config.js seems to be pretty simple
module.exports = {
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].template = "./resources/index.html";
return args;
});
},
configureWebpack: {
devServer: {
watchOptions: {
ignored: ["/node_modules/", "/public/", "**/.#*"],
},
},
},
parallel: true,
devServer: {
disableHostCheck: true,
public: process.env.DEV_PUBLIC ?? "mlb.ru",
port: process.env.DEV_PORT ?? 8080,
},
};
and I've even found that my messages has been compiled into bundle.
Maybe anyone has any success with vue-18n-next or maybe some other i18n solution for Vue 3?
The repo & docs have moved:
https://github.com/intlify/vue-i18n-next
I have tried a very similar code and import { createI18n } from 'vue-i18n' should work for you as long as you are in vue-i18n#9.0.0-beta.16
... [code]
import { createI18n } from 'vue-i18n'
const messages = {
es: {
message: {
value: 'Hola Español.',
},
},
en: {
message: {
value: 'Hello English.',
},
},
}
const i18n = createI18n({
locale: 'es',
messages,
})
app
.use(i18n)
.mount('#app')
[code] ...
Like Vue itself, the i18n package comes with various versions. Like Vue, they have a version with and without a runtime compiler. From the docs:
vue-i18n.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)
The warning you received is apparently telling you that you need this compiler version. The docs are slightly less clear about this but you need to point the import to the runtime compiler version of the package, like this:
import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";
I use i18n in external file (i18n.js) I hope it helps you.
i18n.js
import { createI18n } from 'vue-i18n'
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ru: {
message: {
hello: 'Таки здравствуйте'
}
}
}
const i18n = createI18n({
locale: 'en',
messages
})
export default i18n
main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from "#/i18n"
const app = createApp(App)
app.use(i18n)
app.mount('#app')
App.vue
<template>
<span><div>{{ $t("message.hello") }}</div></span>
</template>
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 !