mpgalaxy Comments - Answer Overflow

mpgalaxy

Explore posts from servers

NNuxt PPrisma

Posts Comments

NNuxt

•Created by mpgalaxy on 3/4/2025 in #❓・help

Use crypto server side in nuxt3 (3.8) with node 18

@kapa.ai this was not helpful

8 replies

NNuxt

•Created by mpgalaxy on 6/5/2023 in #❓・help

i18n in modal (nuxt3)

I found the mistake...unbelievable! 😛 There seems to be a problem with the defineNuxtComponent method as a wrapper for the options api, it mainly seems to be aimed at async data which causes my error. So instead of doing a

export default defineNuxtComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return({ t });
  },
  components: {},
  props: {},
  methods: {},
});

export default defineNuxtComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return({ t });
  },
  components: {},
  props: {},
  methods: {},
});

you can use the native vue function defineComponent

export default defineComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return({ t });
  },
  components: {},
  props: {},
  methods: {},
});

export default defineComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return({ t });
  },
  components: {},
  props: {},
  methods: {},
});

and the modal works perfectly fine...omg! 😉

7 replies

NNuxt

•Created by mpgalaxy on 6/5/2023 in #❓・help

i18n in modal (nuxt3)

The browser debug gives me:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <TestModal key=0 onClose=fn<bound close> > 
  at <BaseTransition onAfterEnter=fn<bound afterEnter> onBeforeLeave=fn<bound beforeLeave> appear=false  ... > 
  at <Transition name="zoom-out" onAfterEnter=fn<bound afterEnter> onBeforeLeave=fn<bound beforeLeave>  ... > 
  at <OModal programmatic= {instances: InstanceRegistry, resolve: ƒ, reject: ƒ} fullScreen=false component= {__nuxt_component: true, _fetchKeyBase: '$5ACFfSjzdh', __i18n: Array(1), __hmrId: '650f97d4', setup: ƒ, …}  ... >

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <TestModal key=0 onClose=fn<bound close> > 
  at <BaseTransition onAfterEnter=fn<bound afterEnter> onBeforeLeave=fn<bound beforeLeave> appear=false  ... > 
  at <Transition name="zoom-out" onAfterEnter=fn<bound afterEnter> onBeforeLeave=fn<bound beforeLeave>  ... > 
  at <OModal programmatic= {instances: InstanceRegistry, resolve: ƒ, reject: ƒ} fullScreen=false component= {__nuxt_component: true, _fetchKeyBase: '$5ACFfSjzdh', __i18n: Array(1), __hmrId: '650f97d4', setup: ƒ, …}  ... >

I have no async setup and since I call this modal from javascript I don't have <Suspense> tags is this a bug ? how can I call this modal from javascript without having it pre rendered and shown by condition ? If I use composition api like this

<script setup>
const { t } = useI18n({
  useScope: "local",
});
</script>

<script setup>
const { t } = useI18n({
  useScope: "local",
});
</script>

everything works fine, but I need the options api, switch to composition api is a no go (migrating a very huge project from nuxt2 to nuxt3 with many modals and lots of logic inside these modals)

7 replies

NNuxt

•Created by mpgalaxy on 6/5/2023 in #❓・help

i18n in modal (nuxt3)

my issue is with oruga modal. I'm on nuxt3 calling my modal from javascript (options api) like this:

import TestModal from ...
// this is in methods:
viewModal() {
      this.$oruga.modal.open({
        fullScreen: false,
        component: TestModal,
        props: {},
        hasModalCard: false,
        fullScreen: false,
        height: "95%",
        width: "75%",
        canCancel: ["x"],
      });
    }

import TestModal from ...
// this is in methods:
viewModal() {
      this.$oruga.modal.open({
        fullScreen: false,
        component: TestModal,
        props: {},
        hasModalCard: false,
        fullScreen: false,
        height: "95%",
        width: "75%",
        canCancel: ["x"],
      });
    }

The TestModal is very basic and I want to provide i18n functionality (also options api), but when I add useI18n the modal doesn't show, it just shows a black overlay. Modal:

<i18n>
  {
    "us": {
      "head_title": "Head title in local i18n",
      "my_test": "My test in modal"
    },
    "de": {
      "head_title": "Head Title",
      "my_test": "Ein Test"  
    }
  }
</i18n>

<template>
  <div class="modal is-active">
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          {{ t("my_test") }} ... {{ t("head_title") }}
        </p>
        <o-button outlined variant="danger" @click="$emit('close')">
          {{ t("close") }}
        </o-button>
      </header>
      <section class="modal-card-body">
        <div>BODY</div>
        <br /><br />
      </section>
      <footer class="modal-card-foot">
        <div>FOOTER</div>
      </footer>
    </div>
  </div>
</template>

<script>
export default defineNuxtComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return { t }
  },
  props: {},
  methods: {},
});
</script>

<i18n>
  {
    "us": {
      "head_title": "Head title in local i18n",
      "my_test": "My test in modal"
    },
    "de": {
      "head_title": "Head Title",
      "my_test": "Ein Test"  
    }
  }
</i18n>

<template>
  <div class="modal is-active">
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          {{ t("my_test") }} ... {{ t("head_title") }}
        </p>
        <o-button outlined variant="danger" @click="$emit('close')">
          {{ t("close") }}
        </o-button>
      </header>
      <section class="modal-card-body">
        <div>BODY</div>
        <br /><br />
      </section>
      <footer class="modal-card-foot">
        <div>FOOTER</div>
      </footer>
    </div>
  </div>
</template>

<script>
export default defineNuxtComponent({
  setup() {
    const { t } = useI18n({
      useScope: "local",
    });
    return { t }
  },
  props: {},
  methods: {},
});
</script>

7 replies

NNuxt

•Created by mpgalaxy on 6/5/2023 in #❓・help

i18n in modal (nuxt3)

some more context:

7 replies

NNuxt

•Created by mpgalaxy on 6/5/2023 in #❓・help

i18n in modal (nuxt3)

thats what I thought, too, but it seems to be or maybe it is a bug 😉

7 replies

Gaming

Programming