htmldiretive

Author: vchan14

Diff for: src/App.vue

@@ -7,12 +7,15 @@ import RouterButton from "@/components/RouterButton.vue";
 <template>
   <div class="flex flex-row gap-x-2 h-full w-full">
     <div class="flex flex-col w-36 p-2">
-      <RouterButton to-path="/" name="Home"/>
-      <RouterButton to-path="/about" name="About"/>
-      <RouterButton to-path="/helloworld" name="Hello World"/>
-      <RouterButton to-path="/dynamicattributes" name="Dynamic Attributes"/>
-      <RouterButton to-path="/styling" name="Styling"/>
-      <RouterButton to-path="/nestedcomponents" name="Nested Component"/>
+      <div class="flex flex-col">
+        <h2>Introduction</h2>
+        <RouterButton to-path="/helloworld" name="Hello World"/>
+        <RouterButton to-path="/dynamicattributes" name="Dynamic Attributes"/>
+        <RouterButton to-path="/styling" name="Styling"/>
+        <RouterButton to-path="/nestedcomponents" name="Nested Component"/>
+        <RouterButton to-path="/htmldirective" name="HTML Directive"/>
+      </div>
+
     </div>
     <div class="w-full">
       <RouterView />

Diff for: src/router/index.js

@@ -32,11 +32,15 @@ const router = createRouter({
       name: 'styling',
         component: () => import('../views/styling/StylingView.vue')
     },
-
     {
       path: '/nestedcomponents',
         name: 'nestedcomponents',
         component: () => import('../views/NestedComponents/NestedComponentsView.vue')
+    },
+    {
+      path: '/htmldirective',
+      name: 'htmldirective',
+        component: () => import('../views/htmldirective/HtmlDirectiveView.vue')
     }
   ]
 })

Diff for: src/views/NestedComponents/default.js

@@ -5,7 +5,6 @@ export const AppVue = `
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import NestedComponent from './NestedComponent.vue'
 </script>
 

Diff for: src/views/htmldirective/HtmlDirectiveView.vue

@@ -0,0 +1,8 @@
+<script setup>
+import ReplWrapper from "@/components/ReplWrapper.vue";
+import {AppVue} from "@/views/htmldirective/default.js";
+</script>
+
+<template>
+  <ReplWrapper :code-string="AppVue"/>
+</template>

Diff for: src/views/htmldirective/default.js

@@ -0,0 +1,10 @@
+export const AppVue = `
+<!-- Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content. -->
+<script setup>
+  const htmlString = \`hello <b>world</b>\`;
+</script>
+
+<template>
+  <p v-html="htmlString"></p>
+</template>
+`.trimStart()