In my vue.js 2.5.7 / vuetify": "^1.0.8" application I read i18n support
https://vuetifyjs.com/en/framework/internationalization#vue-i18n
and adding lines in my resources/assets/js/app.js :
import en from 'vuetify/src/locale/en' // English
import es from 'vuetify/src/locale/es' // Has no Spain files
import uk from 'vuetify/src/locale/uk' // Ukrainian
Vue.use( Vuetify, {
lang: {
locales: {en, es, uk},
current: 'en'
}
});
and got error in my console :
ERROR in ./resources/assets/js/app.js
Module not found: Error: Can't resolve 'vuetify/src/locale/en' in '/mnt/_work_sdb8/wwwroot/lar/ArtistsRating/resources/assets/js'
1) Looks like I need to upload some i18n files to my project, but I did not find from where and into which subdir?
2) There si no spain support? It was not in listing in ref above...
Thanks!
From the documentation
Create a folder in your project like projectName//i18n/vuetify/ and there create a file that with name es.ts. It should look something like this:
export default {
"dataIterator": {
"rowsPerPageText": "Items per page:",
"rowsPerPageAll": "All",
"pageText": "{0}-{1} of {2}",
"noResultsText": "No matching records found",
"nextPage": "Next page",
"prevPage": "Previous page"
},
"dataTable": {
"rowsPerPageText": "Rows per page:"
},
"noDataText": "No data available"
}
Then in your main js file app.js you should have:
import Vuetify from 'vuetify'
// Your own translation file
import es from './i18n/vuetify/es'
Vue.use(Vuetify, {
lang: {
locales: { es },
current: 'es'
}
})
I haven't tested this but hope it will work.
You need only to change vuetify/src/locale/en by vuetify/lib/locale/en and it should works without the need to create any additional file (spain in now supported by vuertify)
Related
The following is my problem.
I packaged my project through vite in library mode. The error occurs whenever my library includes any third party UI library (e.g vue-loading-overlay). But other libraries like moment.js will have no problem.
This is my vite.config.js, Is there any problem with my configuration?
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "my-ui-lib",
fileName: "my-ui-lib",
},
rollupOptions: {
external: ["vue"],
output: [
{
format: "es",
exports: "named",
globals: { vue: "vue" },
},
],
},
},
});
Finally I resolved my problem, Adding the following in vite.config.js. It works for me.
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true
},
}
Original Answer
"Chart.js V3 is treeshakable so you need to import and register everything or if you want everything you need to import the chart from the auto import like so:
change
import Chart from 'chart.js'
to ->
import Chart from 'chart.js/auto';
For more information about the different ways of importing and using chart.js you can read the integration page in the docs.
Since you are upgrading from Chart.js V2 you might also want to read the migration guide since there are some major breaking changes between V2 and V3"
/* Adding the following in vite.config.js. Just copy and paste all these code. It works for me. */
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
commonjsOptions: {
esmExternals: true,
},
});
react-pdf v6 has a pretty clever solution for this, look at their entry files. I think the point is to link to the correct file, somehow there's no need to "actually" import the worker (it doesn't run on main thread anyway I guess? New to worker and pdfjs).
import * as pdfjs from 'pdfjs-dist/build/pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url);
import.meta availability.
Refer to vuejs 3 documentation to import vue.
I'm trying to compile a webcomponent based on the monaco editor (in a lit element context). Having tried a lot of options I now have got the result down to two files
rmx-monaco.abc123.js
style.css
My top priority is to get rid of the hash (abc123), but I would also like to get down to a single file with the js and css in. Thanks in advance
My config reads:
import { resolve } from "path";
export default defineConfig({
base: "/",
build: {
rollupOptions: {
input:
// main: resolve(__dirname, "index.html"),
resolve(__dirname, "src/rmx-monaco.ts"),
output: {
// Prevent vendor.js being created
manualChunks: undefined,
// chunkFileNames: "zzz-[name].js",
// this got rid of the hash on style.css
assetFileNames: "assets/[name].[ext]",
},
},
// Prevent vendor.css being created
cssCodeSplit: false,
// prevent some warnings
chunkSizeWarningLimit: 60000,
},
});
My js entry files has these lines
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
import styles from "monaco-editor/min/vs/editor/editor.main.css";
(I can add more if it would help)
I needed to add output: {entryFileNames: "[name].js",...
Still working on getting a single file
add this:
export default defineConfig({
...
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})
Long time passed but for future viewers who visit this thread, try this package for single bundled .html file using ViteJS:
https://github.com/richardtallent/vite-plugin-singlefile
I am transferring a project with a vue-router from Vue.js to Nuxt.js.
After hours of trying and googleing I managed to get everything to work but this one issue that I cant get to work: **Integrating i18n and vue-router with Nuxt.js **
Two problems I could not solve yet:
How to properly update i18n.locale in my router.js file?
How to tell nuxt-i18n that I am using my own router? It now obviously complains about every page that the Route with name 'XXX___en' does not exist.
In my plain vue project the following code works, and I can change the locale in router.js and it would propagate and update this.$i18n.
i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import termsHTML from './translations/terms'
import privacyHTML from './translations/privacy'
import imprintHTML from './translations/imprint'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: { ... }
}
router.js
...
import {
i18n
} from "#/plugins/i18n.js";
...
router.beforeEach((to, from, next) => {
// Set locale to new language
// I CANT GET THIS NEXT LINE WORING IN NUXT.JS
if (i18n.locale !== lang) i18n.locale = lang
...
}
Now in Nuxt I want to do the same. I imported the nuxt-i18n plugin like this in nuxt.config.js:
['nuxt-i18n', {
seo: true,
locales: [{
code: 'en',
name: '🇺🇸',
iso: 'en-US'
},
{
code: 'de',
name: '🇩🇪',
iso: 'de-DE'
}],
defaultLocale: 'en',
vueI18n: {
locale: 'en',
fallbackLocale: 'en',
messages: translations
}
}],
I tried the following in my router without success.
router.js
import nuxtConfig from "~/nuxt.config";
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// access the i18n module which is the second item in the modules array
// then take second item which is the config object and take the vueI18n property
let i18n = nuxtConfig.modules[1][1].vueI18n
...
if (i18n.locale !== lang) i18n.locale = lang
This does not error, but does also not work. Vue.use() is probably wrong here, as this registers a new component, I guess my code does not refer to the right i18n?
Thanks for any help
I now got the thing I wanted by doing the redirects not in the router file but in the NavBar.vue component which gets loaded allways. There you can access this.$i18n without a problem.
It works for me:
{
path: '/:lang([a-z]{0\,2})/blog/authors',
component: AuthorsList
},
I'm working on a project that is using Vue / Gridsome and have a question about importing a config.json file with import './config.json' into the main.js file.
The config.json files is as follows:
{
"brand": "Name"
"company_no": "12345678"
"charity_no": "87654321"
"registered_address": "25 Riverdale House: London: SE13 7LW"
"contact_email": "support#name.com"
}
The main.js file is as follows:
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
Vue.component('Page', PageLayout)
Vue.use(InfiniteLoading)
// General
head.meta.push({
name : 'description',
content : config.brand // I'd like to place the json value here
})
// ...
Will I need to install a plugin which parses the JSON to be able to read these properties, and how would I go about accessing the brand value as an example?
You can simply do something like:
import configJson from './config.json';
const config = JSON.parse(configJson);
Then you can access the data with config.brand for example.
More about JSON parse:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
EDIT
It works if you have webpack >= 2.0.0
https://webpack.js.org/loaders/json-loader/
Otherwise you could create a js file and export the json from there:
config.js
export default
{
// put json here
}
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.