From ead38baac76998c4bd90fd72006ef0a0e5cab6fc Mon Sep 17 00:00:00 2001
From: Daniel Rosel <daniel@alves.world>
Date: Wed, 8 Mar 2023 16:51:19 +0100
Subject: [PATCH] nto working, why.

---
 demo-nuxt/plugins/directives.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/demo-nuxt/plugins/directives.js b/demo-nuxt/plugins/directives.js
index 648fb7a..b4ea492 100644
--- a/demo-nuxt/plugins/directives.js
+++ b/demo-nuxt/plugins/directives.js
@@ -3,16 +3,23 @@ import Garlic from './garlic'
 
 // esling gobaly disable no-unused-vars
 
-console.log('Garlic', Garlic)
 // the intention here is to replace the innerText of the div with itself but encoded with base64
 // we do this with a custom directive
 Vue.directive('garlic', {
-  bind(el, binding, vnode, prevVnode) {
     // eslint-disable-next-line no-unused-vars
-    console.log('inserted', el)
-    el = Garlic.clove(el)
-  }
-  // what methods can we use here?
-  // methods: inserted, update, componentUpdated, unbind, bind
-
+    beforeMount(el, binding, vnode, prevVnode) {
+        // eslint-disable-next-line no-unused-vars
+        console.log('beforeCreate', el)
+      el = Garlic.clove(el)
+    },
+    /*
+      Since most custom directives involve direct DOM manipulation, they are ignored during SSR. However, if you want to specify how a custom directive should be rendered (i.e. what attributes it should add to the rendered element), you can use the getSSRProps directive hook:
+    */
+    getSSRProps(el) {
+        // eslint-disable-next-line no-unused-vars
+        console.log('getSSRProps', el)
+        return {
+            innerHTML: Garlic.clove(el)
+        }
+    }
 })