Skip to content

Swiper slider not working in nuxt 3 #15063

@hirenramoliyaiwb

Description

@hirenramoliyaiwb

Environment

npm WARN config global --global, --local are deprecated. Use --location=global instead.
RootDir: D:/project/Nuxt-tailwind-starter-main 11:50:23
Nuxt project info: 11:50:23


  • Operating System: Windows_NT
  • Node Version: v16.16.0
  • Nuxt Version: 3.0.0-rc.11
  • Nitro Version: 0.5.4
  • Package Manager: npm@8.11.0
  • Builder: vite
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

👉 Report an issue: https://github.com/nuxt/framework/issues/new 11:50:23

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

https://stackblitz.com/edit/nuxt-starter-gzlrja?file=app.vue

Describe the bug

When i am starting the server i am getting this error @danielroe

`
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 vuejs/rfcs#227.

D:/project/Nuxt-tailwind-starter-main/pages/contact.vue
81 | import 'swiper/css';
82 |
83 | export default {
| ^^^^^^^^^^^^^^^^
84 | components: {
| ^^^^^^^^^^^^^^^^^
85 | Swiper,
| ^^^^^^^^^^^^^
86 | SwiperSlide,
| ^^^^^^^^^^^^^^^^^^
87 | },
| ^^^^^^
88 | setup() {
| ^^^^^^^^^^^^^
89 | const onSwiper = (swiper) => {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
90 | console.log(swiper);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
91 | };
| ^^^^^^^^
92 | const onSlideChange = () => {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
93 | console.log('slide change');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94 | };
| ^^^^^^^^
95 | return {
| ^^^^^^^^^^^^^^
96 | onSwiper,
| ^^^^^^^^^^^^^^^^^
97 | onSlideChange,
| ^^^^^^^^^^^^^^^^^^^^^^
98 | };
| ^^^^^^^^
99 | },
| ^^^^^^
100| };`

Additional context

No response

Logs

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions