Update docs

Author: webdevnerdstuff

src/documentation/components/FeaturesTable.vue

@@ -20,7 +20,7 @@
 					color="primary"
 					icon="mdi:mdi-earth"
 					size="x-small"
-				/> icon next to it can be used with <code class="inline-code">createVDrilldownTable</code> as a global property.
+				/> icon next to it can be used as a global property in <code class="inline-code">createVDrilldownTable</code>.
 			</div>
 		</v-col>
 	</v-row>

src/documentation/sections/UsageSection.vue

@@ -15,11 +15,41 @@
 
 		<v-col cols="12">
 			<CodeBlock
-				:code="usageCode"
+				:code="usageGlobalPlugin"
 				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
 				lang="javascript"
 				:prismjs="codeBlockSettings.plugin === 'prismjs'"
 				:theme="codeBlockSettings.theme"
+			>
+				<template #label>
+					Global Plugin Registration
+					<br>
+					<i>Global options have a higher precedence and will override local props</i>
+				</template>
+			</CodeBlock>
+		</v-col>
+
+		<v-col cols="12">
+			<CodeBlock
+				:code="usageGlobalComponent"
+				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
+				label="Global Component Registration"
+				lang="javascript"
+				:prismjs="codeBlockSettings.plugin === 'prismjs'"
+				:theme="codeBlockSettings.theme"
+			/>
+		</v-col>
+
+
+		<v-col cols="12">
+			<CodeBlock
+				:code="usageIndividual"
+				F
+				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
+				label="Local Registration"
+				lang="html"
+				:prismjs="codeBlockSettings.plugin === 'prismjs'"
+				:theme="codeBlockSettings.theme"
 			/>
 		</v-col>
 	</v-row>
@@ -38,11 +68,43 @@ const props = defineProps({
 const codeBlockSettings = computed(() => props.codeBlockOptions);
 const classes = inject('classes');
 
-const usageCode = `import App from './App.vue';
-import VDrilldownTable from '@wdns/vuetify-drilldown-table';
-import { createApp } from 'vue';
+const usageGlobalPlugin = `import { createApp } from 'vue';
+import App from './App.vue';
+import { createVDrilldownTable } from '@wdns/vuetify-drilldown-table';
+
+const app = createApp(App);
+
+app.use(createVDrilldownTable({
+  // options
+}));
+
+app.mount('#app');`;
+
+const usageGlobalComponent = `import { createApp } from 'vue';
+import App from './App.vue';
+import { VDrilldownTable } from  '@wdns/vuetify-drilldown-table';
 
 const app = createApp(App);
+
 app.component('VDrilldownTable', VDrilldownTable);
+
 app.mount('#app');`;
+
+const usageIndividual = `<template>
+  <VDrilldownTable
+    :headers="headers"
+    :items="items"
+  />
+</template>
+
+\<script setup\>
+  import VDrilldownTable from  '@wdns/vuetify-drilldown-table';
+
+  const headers = ref([
+    // ...
+  ]);
+  const items = ref([
+    // ...
+  ])
+\</script\>`;
 </script>