Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swiper slider not working in nuxt 3 #15063

Closed
hirenramoliyaiwb opened this issue Sep 29, 2022 · 2 comments
Closed

Swiper slider not working in nuxt 3 #15063

hirenramoliyaiwb opened this issue Sep 29, 2022 · 2 comments

Comments

@hirenramoliyaiwb
Copy link

hirenramoliyaiwb commented Sep 29, 2022

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

@dsvgl
Copy link

dsvgl commented Sep 29, 2022

@hirenramoliyaiwb you don't do export default inside script setup.
Works then. See here: https://stackblitz.com/edit/nuxt-starter-8amzrt?file=app.vue
Note: I removed the <NuxtWelcome /> Component as it prevents sliding.

@danielroe danielroe closed this as not planned Won't fix, can't repro, duplicate, stale Sep 29, 2022
@hirenramoliyaiwb
Copy link
Author

@dsvgl Its worked thank you so much

@danielroe danielroe added the 3.x label Jan 19, 2023
@danielroe danielroe transferred this issue from nuxt/framework Jan 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants