How to get it working with Vue 3 Reactivity Transform?

[martinszeltins]

Right now if I open my component with Preview.js then it shows me this:

I am using the still experimenal Vue 3 Reactivity Transform - https://vuejs.org/guide/extras/reactivity-transform.html

And it seems to me that it is having a difficult time understanding $ - which is the Vue sugar shorthand. Is there a way I can fix this and get Preview.js to render my component?

Here is my component:

<template>
    <!-- Total -->
    <div class="flex justify-end">
        <div class="space-y-4 bg-neutral-200 rounded-md p-4 w-64">
            <div class="flex justify-between">
                <div>Total (net)</div>
                <div class="font-bold">€ {{ totalAmountNet }}</div>
            </div>

            <div class="flex justify-between">
                <div>Total VAT</div>
                <div class="font-bold">€ {{ totalVat }}</div>
            </div>

            <div class="flex justify-between">
                <div class="font-bold">Total</div>
                <div class="font-bold">€ {{ totalAmountGross }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useCheckoutTotal } from '@/components/Checkout/CheckoutTotal/useCheckoutTotal'

    const { totalAmountNet, totalVat, totalAmountGross } = $(useCheckoutTotal())
</script>

Here is the useCheckoutTotal composable:

import { storeToRefs } from 'pinia'
import { useCartStore } from '@/stores/cartStore'

export function useCheckoutTotal() {
    const cartStore = useCartStore()
    
    const { totalAmountGross, totalAmountNet, totalVat } = storeToRefs(cartStore)
    
    return $$({
        totalVat,
        totalAmountNet,
        totalAmountGross,
    })
}

[fwouts]

Hey @martinszeltins, that's a really good question.

It looks like we'd need to enable that setting in https://github.com/fwouts/previewjs/blob/main/frameworks/vue3/src/index.ts#L79.

This highlights the need to be able to customise the Vite plugins that Preview.js uses (and ideally just pick up whatever you have in vite.config.js automatically, tracked in #785).

Would you be able to share your vite.config.js?

[martinszeltins]

@fwouts Yes, that would be ideal if it picked up vite.config.js automatically.

Here is mine:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'
import Components from 'unplugin-vue-components/vite'
import pluginRewriteAll from 'vite-plugin-rewrite-all'
import VueTypeImports from 'vite-plugin-vue-type-imports'
import cssContainerQueriesPolyfillVitePlugin from './vite/plugins/cssContainerQueriesPolyfillVitePlugin'

export default defineConfig(() => {
    return {
        plugins: [
            Components({}),
            VueTypeImports(),
            pluginRewriteAll(),
            vue({ reactivityTransform: true }),
            cssContainerQueriesPolyfillVitePlugin(),
        ],

        resolve: {
            alias: {
                // @ts-ignore
                '@': fileURLToPath(new URL('./src', import.meta.url)),
                '@img': fileURLToPath(new URL('./src/assets/img', import.meta.url)),
            },
        },

        build: {
            target: 'esnext'
        },
    
        server: {
            host: true,
    
            hmr: {
                clientPort: 41215
            }
        },

        css: {
            devSourcemap: true
        }
    }
})

[fwouts]

Thanks @martinszeltins. Heads-up, next version of Preview.js will load your Vite config automatically, which should fix your issues :) I'm just making sure all tests pass before releasing.

[fwouts]

Hey @martinszeltins, can you try v1.16? It should automatically load your Vite config :)