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!
Best Answer
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 stuffreturn {store,}}})</script>I think you mismatched two methods of local components registration.
Check:
- https://vuejs.org/guide/components/registration.html#local-registration
- https://vuejs.org/guide/reusability/composables.html#what-is-a-composable
When using SFC with , imported components are automatically registered locally:
<script setup>import { useStore } from '../store/store.js'const { store } = useStore()</script>Add Following code to your main.js file
import { createApp } from 'vue'import './style.css'import App from './App.vue'import { createPinia } from 'pinia'const app = createApp(App).use(createPinia())app.mount('#app')