diff --git a/packages/extractor-vue/README.md b/packages/extractor-vue/README.md
index 0f07e3823..ba7cfa811 100644
--- a/packages/extractor-vue/README.md
+++ b/packages/extractor-vue/README.md
@@ -1,18 +1,24 @@
-# Vue extractor
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
-This package contains a set of custom extractors that handles Vue files. It supports extracting messages from script and setup scripts as well as limited support for extracting messages from templates.
+# @lingui/vue-extractor
+
+This package contains a custom extractor that handles Vue.js files. It supports extracting messages from script and setup scripts as well as Vue templates.
+
+`@lingui/vue-extractor` is part of [LinguiJS][linguijs]. See the [documentation][documentation] for all information, tutorials and examples.
## Installation
```sh
-npm install @lingui/extractor-vue
+npm install --save-dev @lingui/extractor-vue
```
## Usage
-This custom extractor requires that you use typescript for your lingui configuration.
+This custom extractor requires that you use JavaScript for your Lingui configuration.
-```ts
+```js
import { vueExtractor } from "@lingui/extractor-vue"
import babel from "@lingui/cli/api/extractors/babel"
@@ -27,21 +33,14 @@ const linguiConfig = {
],
extractors: [babel, vueExtractor],
}
+
export default linguiConfig
```
-## Vue template limitations
-
-This extractor assumes annotated `i18n` calls in Vue templates.
-
-The following examples will be extracted:
-
-- `i18n._(/*i18n*/ "Message")`
-- `i18n.t(/*i18n*/ { id: "Message" })`
-- `i18n.t(/*i18n*/ { message: "Message", id: "my.message", comment: "Comment" })`
+## License
-While the following examples wont:
+This package is licensed under [MIT][license] license.
-- `i18n._("Message")`
-- `i18n.t({ id: "Message" })`
-- `i18n.t({ message: "Message", id: "my.message", comment: "Comment" })`
+[license]: https://github.com/lingui/js-lingui/blob/main/LICENSE
+[linguijs]: https://github.com/lingui/js-lingui
+[documentation]: https://lingui.dev
diff --git a/packages/extractor-vue/package.json b/packages/extractor-vue/package.json
index 96fd7f751..84f4139be 100644
--- a/packages/extractor-vue/package.json
+++ b/packages/extractor-vue/package.json
@@ -1,7 +1,7 @@
{
"name": "@lingui/extractor-vue",
"version": "4.0.0-next.5",
- "description": "Custom vue extractor to be used with CLI tool",
+ "description": "Custom Vue.js extractor to be used with the CLI tool",
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
diff --git a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap b/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
index 5dc924ef2..d1eb5290f 100644
--- a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
+++ b/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
@@ -31,7 +31,7 @@ exports[`vue extractor should extract message from vue file 1`] = `
message: My message,
origin: [
test.vue,
- 28,
+ 27,
11,
],
},
@@ -41,9 +41,9 @@ exports[`vue extractor should extract message from vue file 1`] = `
id: my.message,
message: My descriptor message,
origin: [
- ,
- null,
- null,
+ test.vue,
+ 29,
+ 10,
],
},
{
@@ -53,8 +53,8 @@ exports[`vue extractor should extract message from vue file 1`] = `
message: undefined,
origin: [
test.vue,
- 38,
- 11,
+ 35,
+ 5,
],
},
{
@@ -64,7 +64,7 @@ exports[`vue extractor should extract message from vue file 1`] = `
message: undefined,
origin: [
test.vue,
- 39,
+ 36,
11,
],
},
diff --git a/packages/extractor-vue/src/fixtures/test.vue b/packages/extractor-vue/src/fixtures/test.vue
index f89d08426..a9b743ef6 100644
--- a/packages/extractor-vue/src/fixtures/test.vue
+++ b/packages/extractor-vue/src/fixtures/test.vue
@@ -16,7 +16,7 @@ export default defineComponent({
data() {
return {
i18n,
- scriptString: i18n._("Script message"),
+ scriptString: i18n.t("Script message"),
}
},
})
@@ -24,17 +24,14 @@ export default defineComponent({
{{ (x as number).toFixed(2) }}
-
- {{ i18n.t(/*i18n*/ { id: "custom.id", message: "My message" }) }}
+ {{ i18n.t({ id: "custom.id", message: "My message" }) }}
{{
- i18n.t(
- /*i18n*/ {
+ i18n.t({
message: "My descriptor message",
id: "my.message",
comment: "Message comment",
- }
- )
+ })
}}
- {{ i18n._(/*i18n*/ "id used as message") }}
- {{ i18n.t(/*i18n*/ { id: "My message without ID and context" }) }}
+ {{ i18n._("id used as message") }}
+ {{ i18n.t({ id: "My message without ID and context" }) }}
diff --git a/website/docs/ref/extractor-vue.md b/website/docs/ref/extractor-vue.md
new file mode 100644
index 000000000..0e9b30aa4
--- /dev/null
+++ b/website/docs/ref/extractor-vue.md
@@ -0,0 +1,32 @@
+# Vue.js extractor
+
+The `@lingui/extractor-vue` package provides a [custom extractor](../guides/custom-extractor.md) that handles Vue.js files.
+
+## Installation
+
+```bash npm2yarn
+npm install --save-dev @lingui/extractor-vue
+```
+
+## Usage
+
+It is required that you use JavaScript for your Lingui configuration.
+
+```js
+import { vueExtractor } from "@lingui/extractor-vue"
+import babel from "@lingui/cli/api/extractors/babel"
+
+const linguiConfig = {
+ locales: ["en", "nb"],
+ sourceLocale: "en",
+ catalogs: [
+ {
+ path: "/src/{locale}",
+ include: ["/src"],
+ },
+ ],
+ extractors: [babel, vueExtractor],
+}
+
+export default linguiConfig
+```
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 15bc66baf..2dc01d4f2 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -153,6 +153,11 @@ const sidebar = [
label: '@lingui/loader',
id: 'ref/loader',
},
+ {
+ type: 'doc',
+ label: '@lingui/extractor-vue',
+ id: 'ref/extractor-vue',
+ },
{
type: 'doc',
label: 'Lingui Configuration',