fix(nuxt): store config in runtime config for plugin instead of JSON

Author: m0ksem

packages/nuxt/src/composables/use-config-file.ts

@@ -1,9 +1,9 @@
 import { existsSync } from 'fs'
-import { resolveAlias, useNuxt } from '@nuxt/kit';
+import { resolveAlias, useNuxt } from '@nuxt/kit'
 import { resolve } from 'pathe'
-import { resolveInRuntime } from './../utils/resolve';
+import { resolveInRuntime } from './../utils/resolve'
 
-export const useConfigFile = async () => {
+export const useConfigFile = () => {
   const root = resolveAlias('~/')
   const configPath = resolve(root, 'vuestic.config.ts')
   const nuxt = useNuxt()

packages/nuxt/src/composables/use-plugin.ts

@@ -1,4 +1,4 @@
-import { addPluginTemplate } from '@nuxt/kit'
+import { addPluginTemplate, useNuxt } from '@nuxt/kit'
 
 import { resolveInRuntime } from '../utils/resolve'
 
@@ -8,13 +8,13 @@ import type { VuesticOptions } from '../types'
 export const useVuesticPlugin = (options: VuesticOptions) => {
   const pluginPath = resolveInRuntime('./runtime/plugin.mjs')
 
+  const nuxt = useNuxt()
+
+  ;(nuxt.options.runtimeConfig.public as any)['#vuestic-public-options-config'] = options.config
+  ;(nuxt.options.runtimeConfig.public as any)['#vuestic-public-options-theme-cookie-key'] = options.themeCookieKey
+
   addPluginTemplate({
     src: pluginPath,
-    filename: pluginPath.split('/').pop(),
-
-    // Use JSON.stringify() here, because it will be inserted in ejs template as string. Then we will JSON.parse it.
-    options: {
-      value: JSON.stringify(options),
-    },
+    filename: pluginPath.split('/').pop()
   })
 }

packages/nuxt/src/module.ts

@@ -4,7 +4,7 @@ import { useVuesticCSS } from './composables/use-css'
 import { useVuesticPlugin } from './composables/use-plugin'
 import { useVuesticComposables } from './composables/use-composables'
 import { useVuesticComponents } from './composables/use-components'
-import { useTranspile } from './composables/use-transpile';
+import { useTranspile } from './composables/use-transpile'
 import { useConfigFile } from './composables/use-config-file'
 
 import type { VuesticOptions } from './types'
@@ -24,7 +24,7 @@ export default defineNuxtModule<VuesticOptions>({
     config: {},
     css: [],
     fonts: true,
-    themeCookieKey: 'vuestic-theme',
+    themeCookieKey: 'vuestic-theme'
   },
 
   setup (options) {

packages/nuxt/src/runtime/plugin.ts

@@ -13,6 +13,7 @@ import type { VuesticOptions } from '../types'
 import { useHead, ReactiveHead, defineNuxtPlugin, useCookie } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
 import configFromFile from '#vuestic-config'
+import { useRuntimeConfig } from '#app'
 
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
@@ -21,10 +22,11 @@ function getGlobalProperty (app, key) {
 export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
-  // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const moduleOptions: VuesticOptions = JSON.parse('<%= options.value %>')
-  const themeCookie = useCookie(moduleOptions.themeCookieKey)
-  const userConfig = configFromFile || moduleOptions.config || {}
+  // Ignore
+  const moduleOptionsConfig: VuesticOptions['config'] = (useRuntimeConfig() as any).public['#vuestic-public-options-config']
+  const moduleOptionsThemeCookieKey: VuesticOptions['themeCookieKey'] = (useRuntimeConfig() as any).public['#vuestic-public-options-theme-cookie-key']
+  const themeCookie = useCookie(moduleOptionsThemeCookieKey)
+  const userConfig = configFromFile || moduleOptionsConfig || {}
   const configWithColors: PartialGlobalConfig = {
     ...userConfig,
     colors: {