Question 261457 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How to use and register local components inside App.vue

I am using Laravel 10, Vite and Vue

I want to use two component inside my App.vue

Here is my App.vue file :

    <template>
        <div>
            <AppHeader></AppHeader>
            ... Content ...
            <AppFooter></AppFooter>
        </div>
    </template>

    <script setup>
    import AppHeader from "./components/partials/AppHeader.vue";
    import AppFooter from "./components/partials/AppFooter.vue";
    export default {
        components : {
            AppHeader,
            AppFooter,
        }
    }
    </script>

I get this error :

[vite:vue] [@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/vuej
s/rfcs/pull/227.

C:/xampp/htdocs/laravel/rest_api/resources/js/components/App.vue
9  |  <script setup>
10 |  import AppHeader from "./components/partials/AppHeader.vue";
11 |  import AppFooter from "./components/partials/AppFooter.vue";
   |                                                               ^
12 |  export default {
   |  ^^^^^^^^^^^^^^^^
13 |      components : {
   |  ^^^^^^^^^^^^^^^^^^
14 |          AppHeader,
   |  ^^^^^^^^^^^^^^^^^^
15 |          AppFooter,
   |  ^^^^^^^^^^^^^^^^^^
16 |      }
   |  ^^^^^
17 |  }
   |  ^

Thanks

I am a total beginner in Vue and this code is from a Tutorial

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks your help works for me but I changed

    import AppHeader from "./components/partials/AppHeader.vue";
import AppHeader from "./components/partials/AppHeader.vue";

    to

    import AppHeader from "@/components/partials/AppHeader.vue";
import AppFooter from "@/components/partials/AppFooter.vue";

  2. 0

    the script setup has changed with the introduction of new syntax in Vue 3.1. According to the problem message, "script setup" cannot include exports of ES modules.

    • Removed the export default statement inside .
      You no longer need to use export default in the syntax. The essential variables and parts are implicitly exported by the setup block.

    • Used defineProps to handle props if you have any.
      You must use the defineProps function to explicitly define any props your component may have. By doing this, you can be sure that your component can manage and access the props properly.

    <template>
  <div>
    <AppHeader></AppHeader>
    <!-- ... Content ... -->
    <AppFooter></AppFooter>
  </div>
</template>

<script setup>
import AppHeader from "./components/partials/AppHeader.vue";
import AppFooter from "./components/partials/AppFooter.vue";

defineProps(['AppHeader','AppFooter']) // If you have props, make sure to define them

// No need for the export default in <script setup>
</script>

    The setup section declares the components, and those components are immediately usable in the template.So you don’t need to export AppHeader and AppFooter because you can use them directly in the template.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search