'Vue 3 brakes when building for production using Options API in conjunction with setup script
I like to use a combination of the <script setup> with the options API, and I have encountered a strange issue that has never before happened to me and I've managed to create a new environment to replicate the issue here:
https://stackblitz.com/edit/vitejs-vite-3sc8ha?file=src%2FApp.vue
The file to look at is the App.vue
So basically what happens is that the computed property named "theme" is undefined since the testStore is undefined inside the options API theme getter.
*Important note: It only fails when using "vite build" and it does not happen when using "vite"
If I remove the options API defineComponent script and create the computed property in the setup script as so:
const theme = computed(() => {
return store.getTheme;
});
To summarize the issue:
The defineExpose doesen't seem to be working well when building the vue app for production.
Is this approach of having 2 scripts wrong because I have been working like this since I started using Vue 3 and I haven't had any issues with this until recently.
App.vue Code:
<template>
<div id="app">
Hi!
<img alt="Vue logo" src="https://vuejs.org/images/logo.png" />
{{ theme }}
<router-view></router-view>
{{ route.name }}
</div>
</template>
<script lang="ts" setup>
import { useTestStore } from './stores/test';
import { ref, defineComponent, defineExpose, computed } from 'vue';
import { useRoute } from 'vue-router';
const store = useTestStore();
const test = ref(store.getTheme);
const route = useRoute();
// Using this instead of the options API fixes the problem
// const theme = computed(() => {
// return store.getTheme;
// });
defineExpose({
store,
});
</script>
<!-- Commenting the script below fixes the issue -->
<script lang="ts">
export default defineComponent({
computed: {
theme() {
return this.store.getTheme; //store will be undefined
},
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
