Nuxt 서버 사이드

[ksbgenius]

Version

1.1.1

Test Environment

Nuxt 2.6.2

Current Behavior

서버사이드에서 동작 문의 클라이언트단에서는 상관 없는데 서버단에서는 로드를 할 수 없는 것인가요? 아래 코드는 index.vue 페이지 단에서 호출했을 경우 정상적으로 에디터를 로드합니다.

if(process.client) { require('tui-editor/dist/tui-editor.css'); require('tui-editor/dist/tui-editor-contents.css'); require('codemirror/lib/codemirror.css'); var toastui = require('@toast-ui/vue-editor'); var Editor = toastui.Editor; }

// Write example code

Expected Behavior

nuxt.config.js 쪽에서 선언하고 사용하는 방법을 알고 싶습니다.

[dungsil]

<no-ssr> 태그를 사용하셔서 감싸주시거나 plugins/tui-editor.client.js 파일을 만드셔서 해당 부분 넣으시면 됩니다.

[ksbgenius]

감사합니다.

[dungsil]

Solution1 - All in one

// plugins/tui-editor.client.js
import Vue from 'vue'
import { Editor, Viewer } from '@toast-ui/vue-editor'

import 'codemirror/lib/codemirror.css'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'

Vue.component(Editor.name, Editor);  // <TuiEditor />
Vue.component(Viewer.name, Viewer); // <TuiViewer />

// nuxt.config.js
module.exports = {
  // ...
  plugins: [
     '~plugins/tui-editor.client.js'
  ]
}

Solution 2 - Splitting CSS

// plugins/tui-editor.client.js
import Vue from 'vue'
import { Editor, Viewer } from '@toast-ui/vue-editor'

Vue.component(Editor.name, Editor);  // <TuiEditor />
Vue.component(Viewer.name, Viewer); // <TuiViewer />

// nuxt.config.js
module.exports = {
   // ...
  css: [
    'tui-editor/dist/tui-editor.css',
    'tui-editor/dist/tui-editor-contents.css',
    'codemirror/lib/codemirror.css'
  ],
  plugins: [
     '~plugins/tui-editor.client.js'
  ]
}

Demo

[sayi65]

@firefanda

Hi Solution1 and Solution 2 not working to me. my nuxtjs app version is nuxt 2.7.1 when reload page always show [window is not defined]

But This setting is working for me. i hope please write nuxtjs setting in document.

// plugins/tui-editor.js

import Vue from 'vue'
import { Editor } from '@toast-ui/vue-editor'

import 'codemirror/lib/codemirror.css'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'

Vue.component('editor', Editor)

// nuxt.config.js 
module.exports = {
  plugins: [
   { src:'@/plugins/tui-editor', ssr: false},
 ],

 build: {
  vendor: ['@toast-ui/vue-editor'],
}
}

[dungsil]

Hi, @sayi65 Thank you for having trouble with my solution.

Here are some of the issues I have confirmed:

1. The css property should not omit the extension
2. I need to set it using Vue.component, not Vue.use.
3. The 'window is not defined' error is a problem caused by excluding client in the plugin name. (tui-editor.client.js -> tui-editor.js)

You can resolve this error by turning off the server side rendering option, just like the source code provided. but, the ssr: false option has been deprecated since nuxt v2.4 (link), recommended to use mode: 'client'.

// nuxt.config.js
module.exports = {
  // ...
  plugins: [
    {
      src: '~plugins/tui-editor',
      mode: 'client'
    }
  ]
}

I solved the problem I identified and added a simple demo link. Thank you for your help! :heart:

[sayi65]

@firefanda Hi.firefanda

You can resolve this error by turning off the server side rendering option, just like the source code >> provided. but, the ssr: false option has been deprecated since nuxt v2.4 (link), recommended to use >> mode: 'client'.

you are right. but my source working well. I think ssr:false working now. in next major release will not working.

[dungsil]

@sayi65 Yes, this is just a recommendation, not a requirement. If you do not have a migration plan, you can use it ssr:false option.

[sohee-lee7]

This issue was resolved so close it.