Wie man Tags im HTML Head mit Nuxt 3 ordnet/sortiert

Gestern hatte ich einen Anwendungsfall, bei dem ich ein Skript-Tag im HTML Head vor allen anderen gerendert haben wollte. Da die Anwendung mit Nuxt 3 erstellt wurde, war meine erste Anlaufstelle natürlich die Nuxt-Dokumentation, dort fand aber nicht sofort, wie man das macht. Also beschloss ich, ein wenig tiefer in dieses Thema einzutauchen.

Bald entdeckte ich (in der Dokumentation), dass Nuxt 3 unter der Haube @unjs/unhead verwendet. Es hat eine super Dokumentation über das Sortieren von Tags. Unhead verwendet das Konzept der Prioritäten, um die verschiedenen Tags zu sortieren. Ich werde hier nicht zu sehr ins Detail gehen, da die Dokumentation ziemlich klar ist, aber hier ist ein kurzes TLDR:

• Tags werden nach aufsteigender Priorität sortiert, d.h. je niedriger die Zahl, desto eher erscheint das Tag im Dokument
• alle Tags haben eine Standardpriorität von 10

useHead({  script: [    {      src: '/very-important-script.js',      tagPriority: 0    }  ]})

Definition der Tag-Priorität

Man kann die Priorität auf zwei Arten festlegen: mit Hilfe von Aliasen oder direkt durch Zuweisung von Zahlen.
Die vordefinierten Aliase sind die folgenden:

• 'critical' = 2
• 'high' = 9
• 'low' = 11

Wie Sie sehen können, entsprechen sie einer bestimmten Prioritätsnummer.

useHead({  script: [    {      src: '/my-critical-script.js',      tagPriority: 'critical'    }  ]})

Man kann die Priorität auch direkt mit Hilfe von Zahlen festlegen. Man muss nur folgendes beachten: je niedriger die Zahl, desto höher die Priorität.

Verwendung von before: und after: mit Tag-Keys

Es gibt auch die Möglichkeit, die Tags zu sortieren, indem man die Reihenfolge explizit festlegt. Damit dies funktioniert, muss für jedes Tag, das auf diese Weise sortiert werden soll, ein key gesetzt werden.

useHead({  script: [    {      key: 'i-am-critical',      src: '/my-critical-script.js'    }  ]})

Nun soll ein anderes Skript vor diesem Skript kommen. Dafür kann after:script:i-am-critical als Prioritätsangabe verwendet werden.

useHead({  script: [    {      key: 'i-am-critical',      src: '/my-critical-script.js'    },    {      tagPriority: 'after:script:i-am-critical',      src: '/my-other-critical-script.js'    }  ]})

Verwendung von unhead hooks

Es gibt noch eine dritte Möglichkeit, wie man eine Tag-Sortierung erreichen kann. Unhead stellt einige Hooks zur Verfügung, die zum Sortieren verwendet werden können. Zum Zeitpunkt des Schreibens dieses Artikels werden diese Hooks aber nicht von Nuxt zur Verfügung gestellt, so dass man sie im Moment leider nicht verwenden kann. Aber ich habe ein Issue auf GitHub dafür erstellt 💪.

Das war's für den Moment, ich hoffe, das hilft jemandem, der nach dem gleichen Thema sucht 😊