1

I have an app using Vite 5 and Vue 3 with a permission system with a handful of different decentralized modules that use js symbols to define their actions and then get registered with a centralized permission service. Using symbols allows us to not worry about naming collisions and potentially checking the wrong permission module. This works great EXCEPT FOR HMR.

So when you're editing an SFC like below and HMR fires it appears to reimport and remake those symbols, meaning they no longer match the ones in memory, so everything fails the permission checks. I totally get why that happens, but I'm hoping there's a work-around other than don't use symbols.

psuedocode, don't mind typos

<script setup lang="ts">
    import { actions } from '@/permissions/crudActions';
    import permissions from '@/permissions/service';

    const item = someItemGeneratingThing();
</script>
<template>
    <button v-if="permissions.can(actions.DELETE, item)">Delete Item</button>
    <button v-if="permissions.can(actions.EDIT, item)">Save Item</button>
</template>

Anybody have any ideas on how to keep HMR, or maybe switch to auto reload for this situation, or anything better than wait for it to happen and then manually refresh the browser?

Improve this question
Related questions
78
Vue 3 Vite - dynamic image src
156
The `@` alias that points to the `src` folder doesn't work
317
Vue v-on:click does not work on component
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.