Auto-Import the generated Document types in 'prismicio-types.d.ts'

[simonmaass]

Maybe i am missing something but how can these types be auto imported in nuxt?

This feels wrong....

imports: {
    presets: [
      {
        from: '~~/prismicio-types',
        imports: [
          { name: 'ArticleDocument', type: true },
          { name: 'AuthorDocument', type: true },
          { name: 'CategoryDocument', type: true }
        ]
      }
    ]
  },

[lihbr]

Hi Simon,

I believe you'd like to import Content from @prismicio/client instead, which namespaces all your documents and slice types. Could you try something like:

imports: {
	imports: [
		{ name: "Content", from: "@prismicio/client", type: true }
	]
}

This should allow you to reference all types from prismicio-types.d.ts as Content.* in your app.

By the way, since @nuxtjs/prismic v5 introduced @prismicio/client as a peer dependency, I'm considering adding auto imports for its helpers (asImageSrc, asHTML, etc.) and types (Content, mainly), but I'm worried about naming collisions. If you have any opinion/wish around that, let me know!

[danielaag]

Hiii @lihbr , is this the reason why, with the recent prismic vue / nuxt updates, $prismic.asText or $prismic.asLink and other content helpers no longer work in components? Even usePrismic() doesn't return them now I see. I can't find any specific docs on this I think. I can use isFilled, which I see still getting returned.

Should I manually import them from @prismicio/client now, or what is the recommended implementation for these helpers? I use them a lot when templating content! Auto imports would be great on those and types too!

Thank you ❤️

[lihbr]

Hi @danielaag, yes, exactly! As part of the latest majors, only client and isFilled remain available from usePrismic(): https://prismic.io/docs/technical-reference/prismicio-vue/v6#update-useprismic-and-prismic-usage

Here's the reasoning behind it:

• import { ... } from "@prismicio/client" vs. const { ... } = usePrismic() is roughly the same amount of code inside your script sections (your IDE should also be smarter at writing the import for you than figuring out it has to extract it from a composable, even though AI completion changes that a bit...)
• asLink, asText, etc, were mostly just passthrough from @prismicio/client through the Vue plugin. Removing them allowed for simplifying internal code while also removing some of the "magic" (importing from a package is more "explicit" than extracting from a composable)
• Only isFilled was preserved to ease templating (through $prismic.isFilled) as it's the only helper that doesn't have a component equivalent (which are auto-imported), and in most cases, you shouldn't need other helpers for templating (but if you have counter examples, happy to discuss that!)

What I'm considering is whether or not the Nuxt module should add auto imports for them, something like (which you can already configure yourself if you want to!):

imports: {
	presets: [
		{
			from: "@prismicio/client",
			imports: [
				{ name: "Content", type: true },
				"asText", "asLink", "asImageSrc", "..."
			]
		}
	]
}

My concerns being around naming collisions (so probably having to provide a toggle for it)

[lihbr]

Hey there, just letting you know I added an experimental imports option in 5.2.0 🎉

You can set it to all to auto-imports @prismicio/client helpers and Content types, or configure it as ["vue", "content"] if you don't need the @prismicio/client helpers import:

prismic/src/module.ts

Lines 107 to 120 in 7f30a39

	/**
	* Controls which auto-imports are added by the module.
	*
	* - `"all"` will add all imports.
	* - `["vue"]` will add `@nuxtjs/prismic` and `@prismicio/vue` imports.
	* - `["javascript"]` will add `@prismicio/client` imports.
	* - `["content"]` will add the `Content` type import.
	* - `false` will not add any import.
	*
	* @defaultValue `["vue"]`
	*
	* @experimental
	*/
	imports?: false | "all" | ("vue" | "javascript" | "content")[]

Curious about any feedback on it :)

[simonmaass]

@lihbr i think thats nice and gives more control - thank you! The downside i see is that there could be name collisionns quite easily with something liek "asLink".

Do i see it corectly that the type are not imported... so for example this:

import type { LinkField, FieldState } from '@prismicio/client'

const {
  callToAction = undefined,
} = defineProps<{
  callToAction?: LinkField<string, string, unknown, FieldState, 'primary' | 'secondary'>
}>()

[lihbr]

Thanks, and yes, as for types it only import Content, I guess we could add auto imports for field types also 🤔

[danielaag]

Hi, thank you so much for clearing it up and adding the feature @lihbr !

For now, the implementation works great for me! The field types import could be interesting. For the overlap of "Content" and other imports, maybe the option of adding a prefix or something along those lines would be nice, but I know it may be complex. Or always prefixing things with "prismic" / "Prismic" maybe? Might be overkill.

Also the logic on not importing the helpers out of the box sounds good! Cheers :)