Merge branch 'kymtwyf-main'

Author: webdevnerdstuff

CHANGELOG.md

@@ -1,8 +1,13 @@
 # Change Log
 All notable changes to the "vue-code-block" plugin will be documented in this file.
 
+## v2.3.3
+03-13-2024
+[main] (@kymtwyf)
+* Fix cssPath prop not being reactive. Fixes [#49](https://github.com/webdevnerdstuff/vue-code-block/issues/49)
+
 ## v2.3.2
-13-03-2024
+03-13-2024
 [main] (@webdevnerdstuff)
 * Change component to use `defineAsyncComponent`
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wdns/vue-code-block",
-	"version": "2.3.2",
+	"version": "2.3.3",
 	"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
 	"private": false,
 	"publishConfig": {

src/plugin/VCodeBlock.vue

@@ -184,7 +184,7 @@ const renderedCode = ref('');
 const runTextValue = ref<string>('');
 const useTheme = ref<boolean | string>('');
 
-const { copyButton, copyIcons, copyTab, cssPath, label, runTab, tabs } = toRefs(settings.value);
+const { copyButton, copyIcons, copyTab, label, runTab, tabs } = toRefs(settings.value);
 
 
 // -------------------------------------------------- Computed //
@@ -297,10 +297,7 @@ watch(props as Props, () => {
 	if (settings.value.runText) {
 		runTextValue.value = settings.value.runText;
 	}
-});
 
-watch(() => cssPath, () => {
-	loadTheme();
 });
 
 
@@ -438,8 +435,8 @@ function loadTheme(): void {
 
 	const adjustCssFilename = themeNameAdjustments(activeLibrary, useTheme.value);
 
-	if (typeof cssPath.value !== 'undefined') {
-		fetchUrl = cssPath.value;
+	if (typeof settings.value.cssPath !== 'undefined') {
+		fetchUrl = settings.value.cssPath;
 	}
 	else {
 		switch (activeLibrary) {