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({ 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',