question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Types for defineNuxtPlugin and nuxtApp

See original GitHub issue

Environment

IDE PhpStorm 2021.3.3

$ tsc --version Version 4.6.3

“name”: “nuxt3”, “version”: “3.0.0-27484505.9f6eff7”, “repository”: “nuxt/framework”,

Reproduction

I created this stackblitz but I can’t quite get the "strict": true to work 😣

https://stackblitz.com/edit/github-1j3sw2

Describe the bug

TS7022: ‘plugin’ implicitly has type ‘any’ because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

image

Additional context

What is the recommended way to type a plugin so that nuxtApp is fully typed? e.g.

import type { NuxtApp } from "nuxt3"
import { defineNuxtPlugin } from "nuxt3"

const plugin = defineNuxtPlugin((nuxtApp: NuxtApp) => {
  const myplugin = {}
  nuxtApp.provide('myplugin', myplugin)
}

Would be great to update the nuxt3 docs with the corresponding types here: https://v3.nuxtjs.org/guide/directory-structure/plugins/#creating-plugins

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
danielroecommented, Apr 12, 2022

It is a generic, and should fill out as soon as you provide a plugin within defineNuxtPlugin.

0reactions
abarkecommented, Apr 13, 2022

Thanks for the clarity 👏

Read more comments on GitHub >

github_iconTop Results From Across the Web

plugins/ · Nuxt Directory Structure
Nuxt reads the files in your plugins directory and loads them at the creation of the Vue application.
Read more >
Introduction to Nuxt 3 modules - DEV Community ‍ ‍
This composable is used to register a state that is mainained both on the server and client by using useState composable. import type...
Read more >
@nuxt/bridge-edge - npm
Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a...
Read more >
Client-only Nuxt 3 Vue plugin - Stack Overflow
... export default defineNuxtPlugin((nuxtApp) => { return { provide: ... and running into "window is not defined" type errors, ...
Read more >
Kickstart your next project with Nuxt3 and vuetify3 | Dec, 2022
Then navigate into your nuxt-app directory, or move the… ... { createVuetify } from 'vuetify'export default defineNuxtPlugin(nuxtApp => {
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found