Всем привет, начал недавно тыкать nuxt. Решил сделать базовое приложение

и вот с подключением библиотек у меня проблема.
Хочу заюзать vuejs-paginate, поддержки ssr у неё нет. Мои шаги:
1. Установил через yarn add пакет
2. Добавил в plugins/vuejs-paginate.js
import Vue from 'vue'
import Paginate from 'vuejs-paginate'
Vue.use(Paginate)
3. В nuxt.config.js добавил
plugins: [
{src: '~/plugins/vuejs-paginate', mode:'client'},
],
4. В странице добавил
import Paginate from "vuejs-paginate";
и закинул его в components.
5. Вывел по примеру из доки в шаблон
<paginate
:page-count="20"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'className'">
</paginate>
6. На странице window is not defined.

Вопрос: Как правильно проставить плагин чтобы он заработал?)
Также пробовал обернуть в тег no-ssr

обернуть компонент в client-only

решил проблему, не Vue.use а Vue.component

4. В странице добавил Этот пункт не нужен, если стоит components: true

немного не так :) , сomponents:true - не о том

Можно уточнить?

а зачем тебе плагин (глобально компонент регистрировать) ?

я просто не совсме понял (или не так понял) причем тут components: true и импорт?

Если мы подключили плагин глобально, то components: true сам подтянет компонент из плагина

И тут мне стало интересно, а есть лучше решение? Я тоже плагинами цепляю пакеты работающие с document или window. Ведь если мы сделаем такой import локально, но на нас как раз заругается nuxt :) хер ли ты юзаешь window при SSR, независимо от client-only

не, немного не так. Ты же и так уже импортнул и зарегистрировал (Vue.compoent...) , А components: true для другого, глян сырцы, https://github.com/nuxt/components/blob/main/src/index.ts

решения есть, конечно Но в данном случае, что-то не припомню в vuejs-paginate использование window в принципе

Да, спасибо. Тогда моя фраза в корне не верна, а не "не совсем" :)

А можно подсказку ключевыми словами?) Сам почитаю. Просто я всегда client-only пихаю в плагины, а в виду того что nuxt их динамически цепляет - обычно проблем не создаёт.

ой, я не у компа, могу наврать (давно не пользовал кейз) Что-то вроде варианты, обвернуть в свой компонент-обертку (в котором вниз прокинуть $attrs, $listeners) Компонент-обертку грузить динамически (Lazy) в месте использованием с v-if = "isClient" (isClient в mounted делать в true) Или компонент-обертку надо в client-only ... Или в компоненте-обертке делать require, как пример с CKEditor if (process.client) { CkEditor = require('@ckeditor/ckeditor5-vue2') Editor = require('rsn/ckeditor') } else { CkEditor = { component: { template: '<div></div>' } } }

++ спасибо, только если ли польза от такого импорта? Кроме изоляции. Польза в бенчмарке как вариант.

ну бандл общий не резиновый. Там где редко компоненты используются или здровые, как например CREditor, зачем их тащит в глобальный. Лучше выделить в чанк и грузить по необходимости

А такая история возможна с layout'ами? Что бы из шаблона прокинуть по все pages/components. Кейс: когда используем UI библиотеку лишь для CMS и под неё у нас свой layout.

как-то не задумывался. Я просто все маршруты бью на чанки и все :)). При этом не обязательно каждый маршрут в отдельный чанк, можно для группы маршрутов указать гаименование чанки (группировать) { name: "auth-login", path: "/auth/:mode(login|registration)", props: true, component: () => interopDefault(import(/* webpackChunkName: "login" */ "@/pages/private/Login.vue")), export function interopDefault(promise) { return promise.then((m) => m.default || m); } meta: { title: "Вход на сайт" }, },

С накстом забываешь о роутере. Такая игла подлая) ++ спасибо