Answer a question

Following the setup guide for Vuejs and Pinia

<script setup>
import {useStore} from "../stores/store.js";

export default {
  setup() {
    const store = useStore();
    return {
      store,
    }
  },
}
</script>

I get the following error from Vite:

[vite] Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.

How do I move to a version of <script setup> that will allow me to do the above?

Thanks!

Answers

A bit of confusion on my end it seems. The docs talk about adding <script setup> and then also demonstrate using setup(){}, but they don't explicitly state that its one or the other.

Method 1:

<script setup>
import {useStore} from "../stores/store.js";

const store = useStore();

// do stuff
</script>

Method 2:

<script>
import { defineComponent } from 'vue'
import {useStore} from "../stores/store.js";

export default defineComponent({
  setup() {
    const store = useStore();
    // do stuff

    return {
      store,
    }
  }
})
</script>