@verbaly/vue 0.78.0 → 0.80.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -2
- package/dist/index.cjs +4 -1
- package/dist/index.js +5 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -16,9 +16,13 @@ Vue 3 composables for [Verbaly](https://github.com/AronSoto/verbaly): a thin lay
|
|
|
16
16
|
## 🚀 Install
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
pnpm add verbaly @verbaly/vue
|
|
19
|
+
pnpm add verbaly @verbaly/vue @verbaly/vite # @verbaly/unplugin on webpack, Rollup, esbuild or Rspack
|
|
20
|
+
pnpm add -D @verbaly/compiler # the verbaly command: init, extract, check
|
|
21
|
+
npx verbaly init
|
|
20
22
|
```
|
|
21
23
|
|
|
24
|
+
Add `verbaly()` to the plugins in `vite.config` (the [`@verbaly/vite`](https://www.npmjs.com/package/@verbaly/vite) README shows it). It writes `verbaly/app`, the module these composables read. In Nuxt, use [`@verbaly/nuxt`](https://www.npmjs.com/package/@verbaly/nuxt) instead, which installs this plugin for you.
|
|
25
|
+
|
|
22
26
|
```ts
|
|
23
27
|
// main.ts
|
|
24
28
|
import { verbalyPlugin } from '@verbaly/vue';
|
|
@@ -39,7 +43,17 @@ app.use(verbalyPlugin(verbaly));
|
|
|
39
43
|
</template>
|
|
40
44
|
```
|
|
41
45
|
|
|
42
|
-
**The plugin is optional in the browser.** With none above it, a hook reads the instance `verbaly/app` creates, so a single-page app can skip it and a component test renders with no wrapper. On a server it is required, since every request has its own instance.
|
|
46
|
+
**The plugin is optional in the browser.** With none above it, a hook reads the instance `verbaly/app` creates, so a single-page app can skip it and a component test renders with no wrapper. The Vite plugin and unplugin load `verbaly/app` in every file that imports `@verbaly/vue`, so that instance is there before the first render. On a server it is required, since every request has its own instance.
|
|
47
|
+
|
|
48
|
+
**Switching languages.** Writing `locale.value` switches every component, and the page follows: `<html lang>`, `<html dir>` and the choice, saved in the browser. Where a server renders the page, as in Nuxt, switch with `switchLocale` from `verbaly/app` instead: it also sets the cookie the server reads. A single-page app starts in its source language, so read that choice back before mounting:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
// main.ts: the saved choice, else the browser's, loaded before anything renders
|
|
52
|
+
import { resolveLocale } from 'verbaly';
|
|
53
|
+
import { locales, setLocale } from 'verbaly/app';
|
|
54
|
+
|
|
55
|
+
setLocale(resolveLocale({ supported: locales, path: false })).then(() => app.mount('#app'));
|
|
56
|
+
```
|
|
43
57
|
|
|
44
58
|
**Keys are typed.** `useT()` checks every key and its params against your source catalog, through the types Verbaly generates (`src/verbaly.d.ts` in a Vite app, `.nuxt/verbaly.d.ts` in Nuxt): a key no catalog has does not compile. A key that comes from data, like `t(item.key)` or a variable typed as a union of keys, passes as it is, and its params are left open; declare it with `defineKeys` from `verbaly/app` when you want `check` to verify it exists.
|
|
45
59
|
|
package/dist/index.cjs
CHANGED
|
@@ -36,7 +36,10 @@ function useLocale() {
|
|
|
36
36
|
version.value;
|
|
37
37
|
return instance.locale;
|
|
38
38
|
},
|
|
39
|
-
set: (locale) =>
|
|
39
|
+
set: (locale) => {
|
|
40
|
+
instance.setLocale(locale);
|
|
41
|
+
(0, verbaly.persistLocale)(locale);
|
|
42
|
+
}
|
|
40
43
|
});
|
|
41
44
|
}
|
|
42
45
|
function trackVersion(instance) {
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Fragment, computed, defineComponent, h, inject, onScopeDispose, shallowRef } from "vue";
|
|
2
|
-
import { RICH_TAGS, VOID_TAGS, normalizeLink, parseTags } from "verbaly";
|
|
2
|
+
import { RICH_TAGS, VOID_TAGS, normalizeLink, parseTags, persistLocale } from "verbaly";
|
|
3
3
|
// src/index.ts
|
|
4
4
|
const KEY = Symbol("verbaly");
|
|
5
5
|
function verbalyPlugin(instance) {
|
|
@@ -35,7 +35,10 @@ function useLocale() {
|
|
|
35
35
|
version.value;
|
|
36
36
|
return instance.locale;
|
|
37
37
|
},
|
|
38
|
-
set: (locale) =>
|
|
38
|
+
set: (locale) => {
|
|
39
|
+
instance.setLocale(locale);
|
|
40
|
+
persistLocale(locale);
|
|
41
|
+
}
|
|
39
42
|
});
|
|
40
43
|
}
|
|
41
44
|
function trackVersion(instance) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verbaly/vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.80.0",
|
|
4
4
|
"description": "Vue 3 bindings for Verbaly: composables over the reactive core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"i18n",
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"verbaly": "^0.
|
|
54
|
+
"verbaly": "^0.80.0",
|
|
55
55
|
"vue": "^3.4.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"happy-dom": "^21.0.4",
|
|
59
|
-
"verbaly": "^0.
|
|
60
|
-
"vue": "^3.5.
|
|
59
|
+
"verbaly": "^0.80.0",
|
|
60
|
+
"vue": "^3.5.45"
|
|
61
61
|
},
|
|
62
62
|
"scripts": {
|
|
63
63
|
"build": "tsdown",
|