Update hank-elements to v3

README.md

@@ -84,11 +84,11 @@ You can also create your own middleware for full control.
 
 ### Auto-imports
 
-`useHanko` is exposed in the Vue part of your app to allow you direct access to the Hanko API. You can access the current user and much more. **Note**: It will return `null` on the server.
+`useHanko` and `$hanko` is exposed in the Vue part of your app to allow you direct access to the Hanko API. You can access the current user and much more. **Note**: It will return `null` on the server.
 
 ### Server utilities
 
-By default you can access a verified JWT context on `event.context.hanko`. (It will be undefined if the user is not logged in.) If you want to handle this yourself you can set `augmentContext: false`.
+By default, you can access a verified JWT context on `event.context.hanko`. (It will be undefined if the user is not logged in.) If you want to handle this yourself you can set `augmentContext: false`.
 
 `verifyHankoEvent` is exposed in the Nitro part of your app to expose the underlying utility used to create `event.context.hanko` if you want to handle things manually.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/hanko",
-  "version": "1.0.1",
+  "version": "3.0.0",
   "description": "Hanko integration for Nuxt",
   "keywords": [
     "authentication",
@@ -15,6 +15,9 @@
     "type": "git",
     "url": "git+https://github.com/nuxt-modules/hanko.git"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -49,11 +52,11 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^4.0.0",
-    "@teamhanko/hanko-elements": "1.5.2",
-    "defu": "^6.1.4",
-    "jose": "^6.0.0",
-    "ufo": "^1.5.4"
+    "@nuxt/kit": "^4.4.8",
+    "@teamhanko/hanko-elements": "3.0.0",
+    "defu": "^6.1.7",
+    "jose": "^6.2.3",
+    "ufo": "^1.6.4"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "1.16.0",

playground/pages/about.vue

@@ -2,7 +2,7 @@
   <main>
     <h1>About</h1>
     <p>
-      This page is accesible to both logged in and logged out users. No middleware is defined for
+      This page is accessible to both logged in and logged out users. No middleware is defined for
       this page.
     </p>
   </main>

playground/pages/index.vue

@@ -4,7 +4,7 @@
   <main>
     <h1>Home</h1>
     <p>
-      This page is accesible to both logged in and logged out users. No middleware is defined for
+      This page is accessible to both logged in and logged out users. No middleware is defined for
       this page. Use the navigation above to navigate to other pages.
     </p>
   </main>

playground/pages/login.vue

@@ -8,10 +8,13 @@ definePageMeta({
   <main>
     <h1>Log in</h1>
     <p>
-      Only logged out users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-out'],
-})</pre>
+      Only logged out users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-out'],
+    })
+      </code></pre>
     <p v-if="$route.query.redirect">
       You were redirected here from {{ $route.query.redirect }}, once you login, you'll be sent back automatically!
     </p>

playground/pages/protected.vue

@@ -4,20 +4,26 @@ definePageMeta({
 })
 const hanko = useHanko()
 function logout() {
-  hanko!.user.logout()
+  hanko!.logout()
 }
 </script>
 
 <template>
   <div>
     <h1>Protected Page</h1>
     <p>
-      Only logged in users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-in'],
-})</pre>
+      Only logged in users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-in'],
+    })
+      </code></pre>
     <button @click="logout">
-      Log me out
+      Log me out by composable
+    </button>
+    <button @click="$hanko!.logout()">
+      Log me out by provide
     </button>
   </div>
 </template>

playground/pages/user.vue

@@ -3,9 +3,9 @@ definePageMeta({
   middleware: ['hanko-logged-in'],
 })
 
-const hanko = useHanko()
+const { $hanko } = useNuxtApp()
 function logout() {
-  hanko!.user.logout()
+  $hanko!.logout()
 }
 
 const result = ref()
@@ -20,10 +20,13 @@ async function tryAuthenticatedRequest() {
   <main>
     <h1>You are logged in!</h1>
     <p>
-      Only logged in users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-in'],
-})</pre>
+      Only logged in users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-in'],
+    })
+      </code></pre>
     <button @click="logout">
       Log me out
     </button>