Посты по тегу: Nuxt

Nuxt 3 and 4: issue with multiple navigateTo calls

1 дн. назад

At work, on one of our projects, I ran into an issue in Nuxt 4 where a page component needs to perform different redirects via navigateTo() based on various conditions during the execution of the setup function. Something like this:

<template>
  Some page
</template>

<script lang="ts" setup>
if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
}

if (2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
}

if (3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
}

if (4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
}
</script>

This is where the problem appears: in the end, the redirect always goes to the very last URL, i.e. in the example above the navigation ends up at /?abc=4. I dug into the documentation but couldn't find anything built-in to prevent subsequent navigateTo calls from being triggered. It seems this behavior is related to vue router.

You can't write it like this either:

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  return; // not allowed in script setup
}

In the end, the only solution that worked was introducing a boolean variable and checking it before calling navigateTo:

let isAlreadyRedirected = false;

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

Once again: this is the only thing that solved the problem for me. If you have any other solution, please let me know.

Показать полностью...

Nuxt

Vue.js

web development

Nuxt 3 и 4: проблема со множественными вызовами navigateTo

connected2u

3 дн. назад

На работе на одном проекте столкнулся в Nuxt 4 с проблемой, когда в page-компоненте нужно делать разные редиректы через navigateTo() по различным условиям в процессе выполнения setup функции. Примерно так:

<template>
  Some page
</template>

<script lang="ts" setup>
if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
}

if (2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
}

if (3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
}

if (4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
}
</script>

Тут возникает проблема: в конечном итоге срабатывает редирект на самый последний урл, т.е. в коде выше переход будет на /?abc=4. Я порылся в документации, не нашёл ничего встроенного, чтобы избежать срабатывания последующих вызовов navigateTo. Вроде как это поведение связано с vue router.

Вот так написать тоже нельзя:

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  return; // так нельзя в script setup
}

Пришлось делать единственное решение - это завести boolean-переменную и проверять уже её.

let isAlreadyRedirected = false;

if (1 + 1 === 2) {
  await navigateTo('/?abc=1', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 2 + 2 === 4) {
  await navigateTo('/?abc=2', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 3 + 3 === 6) {
  await navigateTo('/?abc=3', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

if (!isAlreadyRedirected && 4 + 4 === 8) {
  await navigateTo('/?abc=4', {
    redirectCode: 302,
  });
  isAlreadyRedirected = true;
}

Ещё раз - это единственное, что решило проблему. Если у вас есть какое-то другое решение, напишите плиз.

Показать полностью...

Nuxt

Vue.js

веб-разработка

ChatGPT 5 - туфта, не заменит программистов (реальный пример на Nuxt 4)

dima

недавно

OpenAI зарелизили ChatGPT 5 - очередную самую крутую модель своей нейросети. А что в итоге?
Мой промпт:

Я делаю build nuxt 3 / nuxt 4 приложения.
Как понять в какие чанки какие файлы залезли?
Почему чанки такие большие?

До этого спрашивал у 4-ки - предлагал ставить vite-bundle-visualizer. Сразу говорю - это не надо делать, всё уже есть встроенное. Сегодня появилась возможность спросить у 5-ки - повторно спросил. Пятый ChatGPT опять предлагает поставить пакет, на этот раз rollup-plugin-visualizer.

Окей, пытаюсь добиться у него информации, которая должна по моему мнению быть показана в ответе (CLI команды), ChatGPT 5 выдаёт:

Пытаюсь узнать про "npx nuxi analyze", он ищет в интернете и долго думает и всё равно выдаёт:

Показать полностью...

Nuxt продан: Vercel, который владеет Next.js, теперь владеет и главным SSR-фреймворком для Vue

volchara

недавно

Новость пришла откуда не ждали: монополизация во фронтенде - Vercel купил Накст. Они и так владели Некстом (главным SSR-фреймворков для Реакта), а теперь у них руки добрались и до вьюшной экосистемы.

Об этом сообщил создатель NuxtJS - Daniel Roe (ник danielroe на Гитхабе). Чисто теоретически Накст остаётся независимым, а Vercel купил только NuxtLabs, а также нанял себе ключевых разработчиков Накста. А практически - у них теперь Nuxt и они теперь будут задавать направление развития.

Не знаю, хорошо это и плохо, но монополизация - это точно плохо.

123

How to use Quill Editor with Nuxt 3 and SSR (Vue)

dima

недавно

If you try to use Quill Editor with Nuxt 3 when rendering a page in SSR you will get this error:

500 document is not defined.

That means NodeJS doesn't have the global variable 'document'. Because SSR rendering is executed in
a NodeJS environment, not a browser.

The sad fact: <client-only> won't help with this problem. The problem with quill's code is that during import, it assumes it's being executed in the browser. I hope you remember that the code imported from the module is not just imported, but executed, i.e. the authors of Quill wrote it so that the 'document' object is immediately accessed there. Very bad.

One solution is to disable SSR, but its an awful solution. But the second solution is to use dynamic JS imports.

My <script lang="ts" setup> in QuillEditor.vue in Nuxt 3 project:

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
// import Quill from 'quill'; // SSR problem with 'document', need to use dynamic import
import type Quill from 'quill';

const elemForQuillEditor = ref<HTMLDivElement|null>(null);

let editor: null|Quill = null; // Do not store in ref() - it causes bugs!

// ...

async function createQuillAndSetListeners() {
  const Quill = (await import('quill')).default; // This is most important thing - usage of JS dynamic import

  if (!elemForQuillEditor.value) return;
  editor = new Quill(elemForQuillEditor.value, {
    theme: 'snow',
    modules: {
      history: {
        delay: 2000,
        maxStack: 500,
        userOnly: true,
      },
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
          ['undo', 'redo'],
        ],
        handlers: {
          undo() {
            editor?.history.undo();
          },
          redo() {
            editor?.history.redo();
          },
        },
      },
    },
    placeholder: props.placeholder,
  });
  
  editor.on('text-change', () => {
    if (!editor) return;
    // ... my other code
  });
}

// ...

onMounted(createQuillAndSetListeners);

Now your Quill editor will work in Nuxt 3 even during SSR!

Nuxt

Vue.js

JavaScript

What technologies does Famabara use?

admin

1 г. назад

Famabara website uses Nuxt 3 as frontend. I like VueJS very much, that's why Nuxt was chosen.

SSR approach allows to have normal HTML on first page load and fast page switch due to SPA mode.

In backend Famabara uses Postgresql, NodeJS, Redis, Go.

Famabara

Nuxt

127