Merge pull request #78 from ecosia/nuxt-support

Add Nuxt SSR support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-safe-html",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A Vue directive which renders sanitised HTML dynamically",
   "main": "dist/main.js",
   "repository": "[email protected]:ecosia/vue-safe-html.git",

src/directive.js

@@ -24,10 +24,15 @@ export { defaultTags as allowedTags };
 export default (tags) => {
   const initialTags = areTagsValid(tags) ? tags : defaultTags;
   return (el, binding) => {
-    const directiveTags = Object.keys(binding.modifiers);
-    const finalTags = directiveTags.length > 0 && areTagsValid(directiveTags) ?
-      directiveTags :
-      initialTags;
+    let finalTags = initialTags;
+
+    if (binding.modifiers) {
+      const directiveTags = Object.keys(binding.modifiers);
+      if (directiveTags.length > 0 && areTagsValid(directiveTags)) {
+        finalTags = directiveTags;
+      }
+    }
+
     const sanitized = sanitizeHTML(binding.value, finalTags);
 
     if (typeof el.innerHTML === 'string') {

src/directive.test.js

@@ -6,20 +6,27 @@ describe('Directive', () => {
   });
 
   describe('Sanitizes', () => {
-    const binding = {
-      modifiers: {},
-      value: '<p><strong>Safe</strong> HTML<script></script></p>',
-    };
     const expected = '<strong>Safe</strong> HTML';
     const directive = createDirective();
 
     it('Client-side', () => {
+      const binding = {
+        modifiers: {},
+        value: '<p><strong>Safe</strong> HTML<script></script></p>',
+      };
       const el = document.createElement('div');
       directive(el, binding);
       expect(el.innerHTML).toBe(expected);
     });
 
     it('Server-side', () => {
+      // example bindings from Nuxt 2
+      const binding = {
+        name: 'safe-html',
+        rawName: 'v-safe-html',
+        value: '<p><strong>Safe</strong> HTML<script></script></p>',
+        expression: 'paragraph',
+      };
       const el = { data: {} };
       directive(el, binding);
       expect(el.data.domProps).toEqual({ innerHTML: expected });