Furnaxe Posts - Answer Overflow

Furnaxe

•Created by Furnaxe on 5/22/2024 in #❓・help

NuxtUI + i18n

Hello, my translation works but as soon as I change language and open my nuxtUI slideover the language doesn't change whereas on my view everything is fine. Any ideas ?

12 replies

NNuxt

•Created by Furnaxe on 5/8/2024 in #❓・help

Loading images

Hello, I have a problem with the loading of my images, when I change page some load and not others. Why is this?

1 replies

NNuxt

•Created by Furnaxe on 5/8/2024 in #❓・help

Nuxt Security

I have install the nuxt-security module and I want to know if we can make customizable pages such as on the too many requests error?

2 replies

NNuxt

•Created by Furnaxe on 4/30/2024 in #❓・help

UPagination

I've set up a watch when the "page" state changes, which refreshes the data, but it has no effect even though the page state does change, why?

const { data: yachtsData, error, refresh } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page: page.value,
      },
    });
watch(page, () => {
  refresh();
});

const { data: yachtsData, error, refresh } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page: page.value,
      },
    });
watch(page, () => {
  refresh();
});

<UPagination v-model="page" :page-count="5" :total="yachtsData.total" />

<UPagination v-model="page" :page-count="5" :total="yachtsData.total" />

11 replies

NNuxt

•Created by Furnaxe on 4/24/2024 in #❓・help

Save image in Nuxt 3

I'm trying to save an image directly to a form upload, on other frameworks I temporarily store the image in a folder then move the image if the form was validated to the public folder but I guess this is not the right solution, does anyone know of a good tuto or explain the right way to do this to achieve what I want? Thanks

3 replies

NNuxt

•Created by Furnaxe on 6/8/2023 in #❓・help

How to use "useI18n" on "server/api" directory

I have this error when i try to use I18n on /server/api :

500
Cannot access 'renderer$1' before initialization

500
Cannot access 'renderer$1' before initialization

3 replies

NNuxt

•Created by Furnaxe on 6/8/2023 in #❓・help

Problem with my form

Hello, I don't understand why my Promise is not captured by my catch? I'm going to onResponseError and I'm supposed to reject the error and capture it in my catch.

try {
      await useFetch('/api/mail', {
          retry: false,
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
          },
          body: JSON.stringify(submission.value),
          onResponseError({ request, response, options, error }) {
              Promise.reject(new ErrorEntity('Erreur', 'yolo'));
          },
          onResponse({ request, response, options }) {
              if (response.status === 200) {
                  addToast({
                      title: 'Succès',
                      message: JSON.stringify(response),
                      type: 'success',
                  });
                  submission.value = {
                      firstname: '',
                      lastname: '',
                      company: '',
                      email: '',
                      phone: '',
                      message: '',
                      captcha: '',
                      uuidCaptcha: '',
                  };
              }
          }
      });
  } catch (error) {
      handleError(error);

try {
      await useFetch('/api/mail', {
          retry: false,
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
          },
          body: JSON.stringify(submission.value),
          onResponseError({ request, response, options, error }) {
              Promise.reject(new ErrorEntity('Erreur', 'yolo'));
          },
          onResponse({ request, response, options }) {
              if (response.status === 200) {
                  addToast({
                      title: 'Succès',
                      message: JSON.stringify(response),
                      type: 'success',
                  });
                  submission.value = {
                      firstname: '',
                      lastname: '',
                      company: '',
                      email: '',
                      phone: '',
                      message: '',
                      captcha: '',
                      uuidCaptcha: '',
                  };
              }
          }
      });
  } catch (error) {
      handleError(error);

3 replies

NNuxt

•Created by Furnaxe on 5/4/2023 in #❓・help

Refreshing a view

I'm trying to force the refresh of a view when the client arrives on it. How do I do this?

3 replies

NNuxt

•Created by Furnaxe on 5/3/2023 in #❓・help

Nuxt3 and Three.js bug

Hello, I have a little problem or I can't find the answer anywhere on the internet (stackoverflow, youtube, etc). I try to make a planet appear in three.js but when I change page with NuxtLink and then I come back to my page where there is my planet, it disappears and does not show any error, I noticed that if I readjust my window in size it reappears. Anyone have an idea where this is coming from? I give you the code below.

<template>
    <div ref="container" class="w-full sm:h-[30rem] lg:block hidden relative overflow-hidden">
        <canvas id="canvas" ref="canvas"></canvas>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const container: { value: HTMLElement | null } = ref(null);
const canvas: { value: HTMLCanvasElement | null } = ref(null);

onMounted(() => {
    if (container.value && canvas.value) {
        setupWebGL(container.value, canvas.value);
    }
});

function setupWebGL(container: HTMLElement, canvas: HTMLCanvasElement) {
    const scene = new THREE.Scene();

    const light = new THREE.AmbientLight(0xffffff, 2.8)
    scene.add(light)

    const camera = new THREE.PerspectiveCamera(
        20,
        container.clientWidth / container.clientHeight,
        0.1,
        200
    );
    camera.position.set(-4, 3, 6);

    const renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: true,
        preserveDrawingBuffer: true,
        alpha: true,
    });
    renderer.setSize(container.clientWidth, container.clientHeight);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.autoRotate = true;
    controls.enablePan = false;
    controls.enableZoom = false;
    controls.maxPolarAngle = Math.PI / 2;
    controls.minPolarAngle = Math.PI / 2;

    const loader = new GLTFLoader();
    loader.load(
        '/models/planet.gltf',
        (gltf) => {
            gltf.scene.traverse((child) => {
                if (child instanceof THREE.Mesh) {
                    child.material = new THREE.MeshStandardMaterial({
                        color: child.material.color,
                        map: child.material.map,
                    });
                }
            });

            const earthMesh = gltf.scene;
            earthMesh.scale.set(1.25, 1.25, 1.25);
            scene.add(earthMesh);
            animate();
        },
        undefined,
        (error) => {
            console.error('An error occurred while loading the model:', error);
        }
    );

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }

    function onWindowResize() {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    }

    window.addEventListener('resize', onWindowResize);

    onBeforeUnmount(() => {
        window.removeEventListener('resize', onWindowResize);
    });
}
</script>

<style scoped>
    .earth-container {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
</style>

<template>
    <div ref="container" class="w-full sm:h-[30rem] lg:block hidden relative overflow-hidden">
        <canvas id="canvas" ref="canvas"></canvas>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const container: { value: HTMLElement | null } = ref(null);
const canvas: { value: HTMLCanvasElement | null } = ref(null);

onMounted(() => {
    if (container.value && canvas.value) {
        setupWebGL(container.value, canvas.value);
    }
});

function setupWebGL(container: HTMLElement, canvas: HTMLCanvasElement) {
    const scene = new THREE.Scene();

    const light = new THREE.AmbientLight(0xffffff, 2.8)
    scene.add(light)

    const camera = new THREE.PerspectiveCamera(
        20,
        container.clientWidth / container.clientHeight,
        0.1,
        200
    );
    camera.position.set(-4, 3, 6);

    const renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: true,
        preserveDrawingBuffer: true,
        alpha: true,
    });
    renderer.setSize(container.clientWidth, container.clientHeight);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.autoRotate = true;
    controls.enablePan = false;
    controls.enableZoom = false;
    controls.maxPolarAngle = Math.PI / 2;
    controls.minPolarAngle = Math.PI / 2;

    const loader = new GLTFLoader();
    loader.load(
        '/models/planet.gltf',
        (gltf) => {
            gltf.scene.traverse((child) => {
                if (child instanceof THREE.Mesh) {
                    child.material = new THREE.MeshStandardMaterial({
                        color: child.material.color,
                        map: child.material.map,
                    });
                }
            });

            const earthMesh = gltf.scene;
            earthMesh.scale.set(1.25, 1.25, 1.25);
            scene.add(earthMesh);
            animate();
        },
        undefined,
        (error) => {
            console.error('An error occurred while loading the model:', error);
        }
    );

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }

    function onWindowResize() {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    }

    window.addEventListener('resize', onWindowResize);

    onBeforeUnmount(() => {
        window.removeEventListener('resize', onWindowResize);
    });
}
</script>

<style scoped>
    .earth-container {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
</style>

14 replies

NNuxt

•Created by Furnaxe on 4/28/2023 in #❓・help

Nuxt3 & Threejs

Hello, I have implemented a 3d model with threejs but when I use NuxtLink to change the page and then come back to the page of my model it disappears. What should I do?

5 replies

Gaming

Programming