Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Question

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Encountering an issue with displaying plugins properly within <script> and <template> tags on WebStorm.

Firstly, let's take a look at my files and configuration:

tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*", "src/i18n.d.ts"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    ...
  },
  "dependencies": {
    "pinia": "^2.0.28",
    "vue": "^3.2.45",
    ...
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    ...
  }
}

Project structure https://i.sstatic.net/il2IV.png

Made a custom i18n plugin for testing purposes in a clear Vue project setup.

...

In template I receive a warning, but it works during runtime. However, including the plugin in the script section causes an error.

I'm puzzled by this situation. Any assistance would be greatly appreciated :)

typescript vue.js

Answer 1

Answer №1

To ensure proper functionality, it is imperative to include $translation in the script section of your code. Global variables cannot simply materialize out of thin air; unless some form of magical transformation like Unplugin is applied. To achieve this, it must be exported as shown below:

export let $translation: (key: string) => string;

export const plugin = {
    install(app: App, options: any) {
        $translation = (key: string) =>  {...};
        app.config.globalProperties.$translation = $translation
    }
}

In Vue 3, consider using type augmentation with @vue/runtime-core instead of just vue:

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $translation: (key: string) => string;
    }
}

Answer 2

To ensure proper functionality, it is imperative to include $translation in the script section of your code. Global variables cannot simply materialize out of thin air; unless some form of magical transformation like Unplugin is applied. To achieve this, it must be exported as shown below:

export let $translation: (key: string) => string;

export const plugin = {
    install(app: App, options: any) {
        $translation = (key: string) =>  {...};
        app.config.globalProperties.$translation = $translation
    }
}

In Vue 3, consider using type augmentation with @vue/runtime-core instead of just vue:

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $translation: (key: string) => string;
    }
}

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Answer №1

Similar questions

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

(angular 8) Error occurred when converting a file or image to FormData due to an invalid value (Note: FormData object printed as Object Form{})

The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

Discovering a solution to extract a value from an Array of objects without explicitly referencing the key has proven to be quite challenging, as my extensive online research has failed to yield any similar or closely related problems

Executing npm prepublish on a complete project

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

The trim() method in Vue.JS does not properly handle trimming a passed string

Linking a string value to a specific data structure in TypeScript

Encountering Thumbnail Type Error While Implementing Swiper in Next.js

The function did not return a Promise or value as expected when using async and await

Retrieve a collection of Firebase records using a specific query parameter

actions with frontend routing for CRUD operations

Encountering an error message stating "Buffer is not defined" while working with gray-matter

Is there a way to retrieve the name of a document stored within a collection using Firebase Firestore and Firebase Storage

Avoid clicking on the HTML element based on the variable's current value

Employing Bazel in conjunction with Lerna and Yarn workspaces

How can Vue-toastr and Vue2 be configured with global options for toastr notifications?

Retrieving the row value of a checkbox in an Angular table

Does not have any exported elements

Encountering a TypeError while working with Next.js 14 and MongoDB: The error "res.status is not a function"