Update to Nuxt 4

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.pnpm-store/
 *.log*
 .nuxt
 .nitro

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+store-dir=~/.pnpm-store

components/Base/Block.vue → app/components/Base/Block.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockType } from '~/types/schema';
+import type { BlockType } from '~~/types/schema';
 
 export interface BaseBlockProps {
 	type: BlockType;

components/Block/ButtonGroup.vue → app/components/Block/ButtonGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BlockProps } from './types';
-import usePostHogFeatureFlag from '../../modules/posthog/runtime/composables/usePostHogFeatureFlag';
-import type { ButtonGroupWithExperiment } from '~/types/schema';
+import usePostHogFeatureFlag from '~~/modules/posthog/runtime/composables/usePostHogFeatureFlag';
+import type { ButtonGroupWithExperiment } from '~~/types/schema';
 
 const { $directus, $readItem } = useNuxtApp();
 const { getFeatureFlag } = usePostHogFeatureFlag();

components/Block/Card.vue → app/components/Block/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BlockProps } from './types';
-import type { Resource, Team } from '~/types/schema';
+import type { Resource, Team } from '~~/types/schema';
 import { resourcePermalink } from '~/utils/resourcePermalink';
 import useVisualEditing from '~/composables/useVisualEditing';
 

components/Block/Directory.vue → app/components/Block/Directory.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { formatTitle } from '@directus/format-title';
 import type { BlockProps } from './types';
-import type { AgencyPartner, Project } from '~/types/schema';
+import type { AgencyPartner, Project } from '~~/types/schema';
 
 const { $directus, $readItem, $readItems } = useNuxtApp();
 

components/Block/LogoCloud.vue → app/components/Block/LogoCloud.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockLogoCloudLogo } from '~/types/schema/blocks';
+import type { BlockLogoCloudLogo } from '~~/types/schema/blocks';
 import type { BlockProps } from './types';
 
 const { $directus, $readItem } = useNuxtApp();

components/Block/WallOfLove/Testimonial.vue → app/components/Block/WallOfLove/Testimonial.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import placeholderAvatar from '~/assets/svg/placeholder-avatar.svg';
 import starIcon from '~/assets/svg/star.svg';
-import type { Testimonial } from '~/types/schema';
+import type { Testimonial } from '~~/types/schema';
 
 const props = defineProps<{ testimonialData: Testimonial }>();
 

components/LogoDoubleTicker.vue → app/components/LogoDoubleTicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { BlockLogoCloudLogo } from '~/types/schema/blocks';
-import type { File } from '~/types/schema';
+import type { BlockLogoCloudLogo } from '~~/types/schema/blocks';
+import type { File } from '~~/types/schema';
 import { Vue3Marquee } from 'vue3-marquee';
 
 const props = defineProps<{

components/LogoGrid.vue → app/components/LogoGrid.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { BlockLogoCloudLogo } from '~/types/schema/blocks';
-import type { File } from '~/types/schema';
+import type { BlockLogoCloudLogo } from '~~/types/schema/blocks';
+import type { File } from '~~/types/schema';
 
 const props = defineProps<{
 	logos: BlockLogoCloudLogo[];

components/LogoTicker.vue → app/components/LogoTicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { BlockLogoCloudLogo } from '~/types/schema/blocks';
-import type { File } from '~/types/schema';
+import type { BlockLogoCloudLogo } from '~~/types/schema/blocks';
+import type { File } from '~~/types/schema';
 import { Vue3Marquee } from 'vue3-marquee';
 
 const props = defineProps<{

components/LogoTitle.vue → app/components/LogoTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { File } from '~/types/schema';
+import type { File } from '~~/types/schema';
 import { resourcePermalink } from '~/utils/resourcePermalink';
 
 export interface LogoTitleProps {

components/Nav/Footer.vue → app/components/Nav/Footer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Query } from '@directus/sdk';
-import type { Navigation, Schema } from '~/types/schema';
+import type { Navigation, Schema } from '~~/types/schema';
 import { getSocialIcon } from '~/utils/social';
 
 const { $directus, $readItem, $readSingleton } = useNuxtApp();

components/OgImage/Default.vue → app/components/OgImage/Default.vue

@@ -13,6 +13,11 @@ defineOptions({
 	inheritAttrs: false,
 });
 
+useHead({
+	link: [],
+	style: [],
+});
+
 function truncate(str: string, n: number) {
 	// Leave whole words intact
 	const isTooLong = str.length > n;
@@ -25,7 +30,7 @@ defineProps<OgProps>();
 </script>
 
 <template>
-	<div class="flex relative w-[1200px] h-[630px] overflow-hidden bg-white">
+	<div class="og-root flex relative w-[1200px] h-[630px] overflow-hidden bg-white">
 		<!-- Left Side -->
 		<div class="flex flex-col justify-between relative w-[600px] h-full p-12">
 			<div class="flex">
@@ -118,3 +123,9 @@ defineProps<OgProps>();
 		</div>
 	</div>
 </template>
+
+<style>
+.og-root {
+	outline: 0 solid transparent;
+}
+</style>

components/PageBuilder.vue → app/components/PageBuilder.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockType, PageBlock, Experiment, ExperimentVariant } from '~/types/schema';
+import type { BlockType, PageBlock, Experiment, ExperimentVariant } from '~~/types/schema';
 
 interface PageBuilderProps {
 	spacingTop?: 'none' | 'x-small' | 'small' | 'normal';

components/PageSection.vue → app/components/PageSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PageBlock } from '~/types/schema';
+import type { PageBlock } from '~~/types/schema';
 
 interface PageSectionProps {
 	background?: PageBlock['background'];

composables/useDirectory.ts → app/composables/useDirectory.ts

@@ -144,15 +144,22 @@ export function useDirectory({ items, searchFields, facetFields, fieldMapping =
 	});
 
 	const isFilterActive = computed(() => {
-		return searchQuery.value || facetFields.some((field) => selectedFacets.value[field].length > 0);
+		return searchQuery.value || facetFields.some((field) => (selectedFacets.value[field]?.length ?? 0) > 0);
 	});
 
 	const updateFacet = (field: string, value: string, isSelected: boolean) => {
+		const current = selectedFacets.value[field] ?? [];
+
 		if (isSelected) {
-			selectedFacets.value[field].push(value);
+			if (!current.includes(value)) {
+				current.push(value);
+			}
 		} else {
-			selectedFacets.value[field] = selectedFacets.value[field].filter((v) => v !== value);
+			selectedFacets.value[field] = current.filter((v) => v !== value);
+			return;
 		}
+
+		selectedFacets.value[field] = current;
 	};
 
 	const clearFilters = () => {

middleware/experiments.global.ts → app/middleware/experiments.global.ts

@@ -1,5 +1,5 @@
 import type { JsonType } from 'posthog-js';
-import usePostHogFeatureFlag from '~/modules/posthog/runtime/composables/usePostHogFeatureFlag';
+import usePostHogFeatureFlag from '~~/modules/posthog/runtime/composables/usePostHogFeatureFlag';
 
 export default defineNuxtRouteMiddleware((to) => {
 	const posthogFeatureFlagPayloads = useState<Record<string, JsonType> | undefined>('ph-feature-flag-payloads');

pages/[...permalink].vue → app/pages/[...permalink].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PageBuilderSection } from '~/components/PageBuilder.vue';
 // For some reason auto import wasn't for this module
-import usePostHogFeatureFlag from '../modules/posthog/runtime/composables/usePostHogFeatureFlag';
+import usePostHogFeatureFlag from '~~/modules/posthog/runtime/composables/usePostHogFeatureFlag';
 import useVisualEditing from '~/composables/useVisualEditing';
 import { withoutTrailingSlash } from 'ufo';
 

pages/agency-directory/[slug].vue → app/pages/agency-directory/[slug].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatTitle } from '@directus/format-title';
-import type { Project } from '~/types/schema';
+import type { Project } from '~~/types/schema';
 
 const { $directus, $readItems } = useNuxtApp();
 const { params } = useRoute();

pages/built-with-directus/[slug].vue → app/pages/built-with-directus/[slug].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatTitle } from '@directus/format-title';
-import type { AgencyPartner, Project, ProjectFile, File } from '~/types/schema';
+import type { AgencyPartner, Project, ProjectFile, File } from '~~/types/schema';
 import { truncateString } from '~/utils/truncateString';
 
 const { $directus, $readItems } = useNuxtApp();

plugins/directus.ts → app/plugins/directus.ts

@@ -2,7 +2,7 @@ import { aggregate, authentication, createDirectus, readItem, readItems, readSin
 import type { RestClient } from '@directus/sdk';
 import Queue from 'p-queue';
 
-import type { Schema } from '~/types/schema';
+import type { Schema } from '~~/types/schema';
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 

plugins/tv.ts → app/plugins/tv.ts

@@ -1,7 +1,7 @@
 import { authentication, createDirectus, rest } from '@directus/sdk';
 import Queue from 'p-queue';
 
-import type { Schema } from '~/types/schema';
+import type { Schema } from '~~/types/schema';
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 

utils/og.ts → app/utils/og.ts

@@ -1,14 +1,19 @@
+function getAssetUrl(baseUrl: string, assetId?: string | null) {
+	if (!assetId) return undefined;
+	return `${baseUrl}/${assetId}?format=jpeg&width=800`;
+}
+
 export function getOgProps(baseUrl: string, collection: string, item = {} as any) {
-	const props = { title: '', imageUrl: '', authorName: '', authorImage: '', badgeLabel: '' };
+	const props = { title: '', imageUrl: undefined, authorName: '', authorImage: undefined, badgeLabel: '' };
 
 	switch (collection) {
 		case 'resources':
 			return {
 				...props,
 				title: item?.seo?.title ?? item?.title ?? 'Directus',
-				imageUrl: `${baseUrl}/${item.image?.id}?format=jpeg&width=800`,
+				imageUrl: getAssetUrl(baseUrl, item.image?.id),
 				authorName: item.author?.name,
-				authorImage: `${baseUrl}/${item.author?.image}?format=jpeg&width=800`,
+				authorImage: getAssetUrl(baseUrl, item.author?.image),
 				badgeLabel: item?.category,
 				publishedAt: item?.date_published
 					? new Intl.DateTimeFormat('en-US', {
@@ -20,20 +25,20 @@ export function getOgProps(baseUrl: string, collection: string, item = {} as any
 			return {
 				...props,
 				title: item?.name ?? 'Directus Team Member',
-				imageUrl: `${baseUrl}/${item.image?.id}?format=jpeg&width=800`,
+				imageUrl: getAssetUrl(baseUrl, item.image?.id),
 				badgeLabel: item?.job_title,
 			};
 		case 'pages':
 			return {
 				...props,
 				title: item.seo?.title ?? item?.title ?? 'Directus',
-				imageUrl: `${baseUrl}/ebdb1343-6ca9-4d66-bc3a-9598e06d8459?format=jpeg&width=800`,
+				imageUrl: getAssetUrl(baseUrl, 'ebdb1343-6ca9-4d66-bc3a-9598e06d8459'),
 			};
 		case 'agency_partners':
 			return {
 				...props,
 				title: item.partner_name ?? 'Directus Agency Partner',
-				imageUrl: `${baseUrl}/${item.partner_logo}?format=jpeg&width=800`,
+				imageUrl: getAssetUrl(baseUrl, item.partner_logo),
 				badgeLabel: `Directus Agency Partner`,
 				publishedAt: item.region ? item?.region?.join(', ') : undefined,
 			};
@@ -59,11 +64,11 @@ export function getOgProps(baseUrl: string, collection: string, item = {} as any
 			return {
 				...props,
 				title: item.name ?? 'Directus Template',
-				imageUrl: `${baseUrl}/${item.image?.id}?format=jpeg&width=800`,
+				imageUrl: getAssetUrl(baseUrl, item.image?.id),
 				badgeLabel: 'Directus Template',
 				publishedAt: item.description,
 				authorName: userName(item.creator),
-				authorImage: `${baseUrl}/${item.creator?.avatar}?format=jpeg&width=800`,
+				authorImage: getAssetUrl(baseUrl, item.creator?.avatar),
 			};
 		}
 

utils/resourcePermalink.ts → app/utils/resourcePermalink.ts

@@ -1,4 +1,4 @@
-import type { Resource } from '~/types/schema';
+import type { Resource } from '~~/types/schema';
 
 export const resourcePermalink = (resource?: Pick<Resource, 'type' | 'slug'> | null) => {
 	if (!resource || !resource.type || !resource.slug || typeof resource.type === 'string') return null;

utils/userName.ts → app/utils/userName.ts

@@ -1,5 +1,5 @@
-import type { User } from '~/types/schema';
-import type { MarketplaceCreator } from '~/types/marketplace';
+import type { User } from '~~/types/schema';
+import type { MarketplaceCreator } from '~~/types/marketplace';
 
 export function userName(user: User | MarketplaceCreator | null | undefined): string {
 	if (!user) {

layers/marketplace/components/Base/BaseSearchDirectory.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { useSearchDirectory } from '~/layers/marketplace/composables/useSearchDirectory';
-import { parseSearchURLState } from '~/layers/marketplace/utils/parse-search-url-state';
-import { getTypesenseService } from '~/layers/marketplace/services/typesenseService';
-import type { SearchConfig, SortOption, FilterAttribute } from '~/layers/marketplace/composables/useSearchDirectory';
+import { useSearchDirectory } from '~~/layers/marketplace/composables/useSearchDirectory';
+import { parseSearchURLState } from '~~/layers/marketplace/utils/parse-search-url-state';
+import { getTypesenseService } from '~~/layers/marketplace/services/typesenseService';
+import type {
+	SearchConfig,
+	SortOption,
+	FilterAttribute,
+	FacetResult,
+} from '~~/layers/marketplace/composables/useSearchDirectory';
 
 interface Props {
 	indexName: string;
@@ -115,7 +120,7 @@ const isFilterOpen = ref(false);
 								<BaseCheckboxGroup
 									v-else
 									:options="
-										search.getFacetResults(filterAttr.attribute).map((facet) => ({
+										search.getFacetResults(filterAttr.attribute).map((facet: FacetResult) => ({
 											label: `${facet.value} (${facet.count})`,
 											value: facet.value,
 										}))

layers/marketplace/components/Marketplace/MarketplaceExtensionActions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { hash } from 'ohash';
-import type { MarketplaceExtension } from '~/types/marketplace';
+import type { MarketplaceExtension } from '~~/types/marketplace';
 import { formatFilesize } from '~/utils/formatFilesize';
 
 const props = defineProps<{

layers/marketplace/components/Marketplace/MarketplaceExtensionCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MarketplaceExtension } from '~/types/marketplace';
+import type { MarketplaceExtension } from '~~/types/marketplace';
 import { formatTimeAgo } from '~/utils/dates';
-import { extensionTypeIconMap } from '~/layers/marketplace/utils/extension-type-icon-map';
+import { extensionTypeIconMap } from '~~/layers/marketplace/utils/extension-type-icon-map';
 
 interface MarketplaceExtensionCardProps {
 	extension: MarketplaceExtension;

layers/marketplace/components/Marketplace/MarketplaceGallery.vue

@@ -6,13 +6,13 @@ const props = defineProps<{
 	}[];
 }>();
 
-const selectedImage = ref(props.images.length ? props.images[0].src : null);
+const selectedImage = ref(props.images[0]?.src ?? null);
 
 watch(
 	() => props.images,
 	(newImages) => {
 		if (newImages.length && !newImages.find((img) => img.src === selectedImage.value)) {
-			selectedImage.value = newImages[0].src;
+			selectedImage.value = newImages[0]?.src ?? null;
 		}
 	},
 );

layers/marketplace/components/Templates/TemplatesActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MarketplaceTemplate, MarketplaceCreator } from '~/types/marketplace';
+import type { MarketplaceTemplate, MarketplaceCreator } from '~~/types/marketplace';
 import { userName } from '~/utils/userName';
 
 defineProps<{

layers/marketplace/components/Templates/TemplatesTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MarketplaceTemplate } from '~/types/marketplace';
+import type { MarketplaceTemplate } from '~~/types/marketplace';
 
 defineProps<{
 	template: MarketplaceTemplate;