Vue Script setup in build imports not accessible

Question

My Problem is when I use setup I can't access it in normal script but only after I build the application in Dev mode anything works fine. In this example, I can't access this.authStore in my logout function.

`

<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};
</script>

<script>
export default {
  name: "Top Bar",
  data() {
    return {
      pageName: this.$route.name,
    };
  },
  methods: {
    async logout() {
      await this.authStore.logout();
    },
  },
};
</script>

`

Why do you use Options API with composition API?

Mina
– Mina

2022-11-03 11:04:21 +00:00
Commented Nov 3, 2022 at 11:04 — Mina
– Mina, Commented Nov 3, 2022 at 11:04

Boussadjra Brahim · Accepted Answer · 2022-11-03 11:08:17Z

1

Try to use only the composition API to make your code consistent, replace logout method by a function, use useRoute to get the route name :

<script setup>
import { ref } from "vue";
import { usRoute } from 'vue-router'
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();

const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);

const route = useRoute()
const pageName=route.name
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};

function logout(){
  authStore.logout();
}
</script>

answered Nov 3, 2022 at 11:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Script setup in build imports not accessible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related