Context

I'm building a Vue app (using the Composition API) in TypeSript and I'm running into an issue that I'm sure has been explained many times, but I just can't find a solution or even know how to best formulate the question. (In case that matters, I'm using Vite and VS Code.)

I have a TS file that contains types, interfaces, enums, classes and functions that are meant to be used globally.

Currently, in every single other .vue or .ts file, I have a lengthy import statement that imports everything I need from that file. As you can imagine, this is quite unwieldy.

Is there a way to make all the contents of that helper file usable everywhere, without having to import it?

Things I've tried

1. Using Vue's global properties

This isn't recommended or documented for projects using the Composition API and script setup, which is what I'm doing. Besides, it doesn't work for enums, types or classes, as far as I could tell.

2. Using Vue's provide/inject or composables features

This is equivalent to using imports, it just adds an extra step. Unless I'm missing something.

3. Importing the file in main.ts, then augmenting the global scope using declare global {} so that TS doesn't complain

I don't know if this is a good practice (probably not) or if it even is supposed to work. I didn't manage to get it to behave. In particular, I didn't know how to get this to behave with classes, I kept getting Declaration or statement expected or No implementation allowed in ambient contexts errors.

4. Using option 3 for types only, and importing everything else

That's what I ended up doing and it makes it sliiiightly more manageable as types is what I need a majority of the time, but I really wish I could find a way to do this for enums as well at the very least.

To sum up...

Is there a best practice for making all kinds of things from a single file available to an entire project without having to rely on import statements?

CodePudding user response：

If what you're looking for is an alternative to Vue2's Vue.prototype, here's a useful resource, authored by @skirtle. It covers all techniques you've already tried, and then some, outlining specific differences, pros and cons of each.

As a rule of thumb, the best practice in Composition API is not to have globals.

The general concept of Composition API is to have granular control over the variables exposed to each <template> and not to expose anything other than what's actually being used in the current component/template.

In other words, wherever you need stuff, you have to import it:

import { useStuff } from './wherever'

const stuff = useStuff();

If you're inside a <script setup>, that should be enough.
If you're inside a setup(), inside a defineComponent(), you have to add stuff to the object returned by setup().

What import means, by definition, is that it's not global. You import it where you need it and, by importing, you expose it locally.

CodePudding user response：

You can use Vue mixins - feel free to check the documentation!