window is not defined

[autorunman22]

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet"

This triggers on Nuxt 3 after installation

[vaban-ru]

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet"

This triggers on Nuxt 3 after installation

Hey! Do you wrap vue-bottom-sheet component in <client-only> tag? I wrote about it in the README

[autorunman22]

@vaban-ru no usage yet just this one line import causes it.

[vaban-ru]

@vaban-ru no usage yet just this one line import causes it.

This is client only plugin, just use <client-only> tag in your template like this, and there is no errors

<template>
  <client-only>
    <vue-bottom-sheet
        ref="myBottomSheet"
    >
      <div class="sheet-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime neque sed tempore ullam.
          Accusamus animi at autem beatae est, hic inventore iste minima, non quibusdam quisquam
          quos velit veritatis voluptatem?
        </p>
        <button type="button" class="btn btn-danger" @click="close">Close</button>
      </div>
    </vue-bottom-sheet>
  </client-only>
</template>

[autorunman22]

is there any other steps apart from installing it in order for it to work with nuxt 3? cos i literally just paste the import statement with empty div template and it wouldn't work. if i comment the import the issue dissapears

[vaban-ru]

is there any other steps apart from installing it in order for it to work with nuxt 3? cos i literally just paste the import statement with empty div template and it wouldn't work. if i comment the import the issue dissapears

Just importing is not enough for the plugin to work, you definitely need to place the plugin in the template

[autorunman22]

@vaban-ru

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
</script>

<template lang="pug">
ClientOnly
    vue-bottom-sheet(ref="myBottomSheet")
        <h1>Lorem Ipsum</h1>
        <h2>What is Lorem Ipsum?</h2>
</template>

would also result to the same error. why did you have to close?

[vaban-ru]

@vaban-ru

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
</script>

<template lang="pug">
ClientOnly
    vue-bottom-sheet(ref="myBottomSheet")
        <h1>Lorem Ipsum</h1>
        <h2>What is Lorem Ipsum?</h2>
</template>

would also result to the same error. why did you have to close?

Please paste the code I wrote below and tell me if the error will appear

<script setup lang="ts">
import VueBottomSheet from '@webzlodimir/vue-bottom-sheet'
import '@webzlodimir/vue-bottom-sheet/dist/style.css'
import {ref} from "vue";
const myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>()
const open = () => {
  myBottomSheet.value?.open()
}
const close = () => {
  myBottomSheet.value?.close()
}
</script>

<template>
  <button @click="open">Open</button>
  <client-only>
    <vue-bottom-sheet
        ref="myBottomSheet"
    >
      <div class="sheet-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime neque sed tempore ullam.
          Accusamus animi at autem beatae est, hic inventore iste minima, non quibusdam quisquam
          quos velit veritatis voluptatem?
        </p>
        <button type="button" class="btn btn-danger" @click="close">Close</button>
      </div>
    </vue-bottom-sheet>
  </client-only>
</template>

[autorunman22]

@vaban-ru okay it works on a fresh page but i found out the problem - it only works without pug preprocessor.
the problem occurs if you use lang="pug" you can test it yourself

[vaban-ru]

@vaban-ru okay it works on a fresh page but i found out the problem - it only works without pug preprocessor. the problem occurs if you use lang="pug" you can test it yourself

Sorry, but in the near future I will not support pug preprocessor, if you want, you can send a PR with a fix for this

[vaban-ru]

And sorry for my opinion, but pug is really awful.