SPA-компоненты в Nuxt.js

Konstantin
Konstantin Ostrovsky
2018-09-28 16:23:09
9

Nuxt.js — это фреймворк для универсальных приложений на Vue.js.

Основной задачей этого фреймворка является рендеринг пользовательского интерфейса в условиях абстракции от клиент-серверной архитектуры.

Я расскажу как использовать Vue.js - компоненты, не поддерживающие SSR-рендеринг в Nuxt.js. Большинство компонентов поддерживаются, но если компонент напрямую работает с DOM-деревом или объектом window, то он не будет поддерживаться серверным рендером.

Мы будем рассматривать подключение SPA-компонента на примере vue2-editor.

Для начала нам нужно подключить компонент в проект. Это можно выполнить командой:

$ npm install --save vue2-editor

Либо этой командой для yarn:

yarn add vue2-editor

Я отдаю свое предпочтение yarn, так как он более удобен и показывает хорошие показатели производительности. Конечно же как его можно не любить за его очень Emoji'ональные сообщия!

В nuxt.js существуют плагины, они призваны расширят объект Vue.js до рендеринга. Плагины могут вызываться как на стороне сервера, так и на стороне клиента. Вы можете использовать переменную process.browser(true|false), но это не правильный подход. Так как если плагин будет добавлен только в клиентскую SPA часть приложения, то при открытии страницу напрямую - рендер будет производиться на стороне сервера, соответственно плагин не пройдет по условию, рендер на стороне клиента не произойдет и плагин не будет работать так как предполагалось.

Во избежание этой проблемы плагин следует подключить в файле nuxt.config.js в корне приложения:

plugins: [
  {
    src: '~plugins/vue2-editor',
    ssr:false
  }],

Параметр ssr определяет где нужно вызвать плагин, server side или client side(browser). Таким образом наш плагин будет добавлен в зависимости только для клиентской части приложения.

Теперь нужно создать сам плагин. Все плагины должны располагаться в папке plugins вашего приложения. Создайте файл с расширением .js со следующим содержимым:

import Vue from 'vue'
import {VueEditor} from 'vue2-editor'

Vue.component('vue-editor', VueEditor);
console.log("Added component vue-editor")

Плагин импортирует объект Vue.js и объект VueEditor из пакета vue2-editor. На 4 строке добавляется компонент vue-editor из объекта VueEditor. После успешного выполнения плагина в консоль будет выведен текст 'Added component vue-editor'.

Теперь вы можете вставить в шаблон вашего приложения компонент <vue-editor> и проверь его работоспособность. Так как компонент подключен глобально, нет необходимости указывать его в зависимости компонентов при использовании.