Trouble with adding tus in Nuxt

[ruslantau]

Hi. I have problem with enabling resumable uploads via tus.io What am I doing wrong?

plugins/vue-file-agent.js

import Vue from 'vue'
import tus from 'tus-js-client'
import VueFileAgent, { plugins } from 'vue-file-agent'

plugins.tus = tus
VueFileAgent.plugins.tus = tus

Vue.use(VueFileAgent)

nuxt.config.js

...
/*
  ** Global CSS
  */
  css: [
    'ant-design-vue/dist/antd.css',
    'vue-file-agent/dist/vue-file-agent.css'
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    { src: '~/plugins/antd-ui' },
    { src: '~/plugins/vue-notification', ssr: false },
    { src: '~/plugins/v-mask' },
    { src: '~/plugins/vue-file-agent' }
  ]
...

package.json

{
  "name": "nuxt_app2",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.11.0",
    "ant-design-vue": "^1.6.2",
    "lodash.assign": "^4.2.0",
    "lodash.merge": "^4.6.2",
    "lodash.sortby": "^4.7.0",
    "nuxt": "^2.13.0",
    "tus-js-client": "^2.1.1",
    "v-mask": "^2.2.1",
    "vue-file-agent": "^1.7.3",
    "vue-notification": "^1.3.20"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-plugin-nuxt": "^1.0.0"
  }
}

Error

Uncaught (in promise) Error: tus required. Please install tus-js-client
    at eval (vue-file-agent.umd.js?7924:2427)
    at new Promise (<anonymous>)
    at UploadHelper.fb15.UploadHelper.doTusUpload (vue-file-agent.umd.js?7924:2425)
    at _loop_2 (vue-file-agent.umd.js?7924:2487)
    at UploadHelper.fb15.UploadHelper.tusUpload (vue-file-agent.umd.js?7924:2505)
    at VueComponent.upload (vue-file-agent.umd.js?7924:2749)
    at VueComponent.uploadFiles (videoUploadsForm.vue?7fec:45)
    at click (videoUploadsForm.vue?beb9:51)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)

[safrazik]

ssr should be disbled for vue-file-agent since it is a frontend component. Not only for nuxt, but for any Server Side Rendering technologies.

[ruslantau]

ssr should be disbled for vue-file-agent since it is a frontend component. Not only for nuxt, but for any Server Side Rendering technologies.

Thanks for response, but it didn't help. I've got the same error. Can you add example of usages VueFileAgent with Nuxt to docs?

I changed nuxt.config.js { src: '~/plugins/vue-file-agent', ssr: false }

and wrapped VueFileAgent component with <client-only> tag components/videoUploadsForm.vue

<client-only>
  <VueFileAgent
        ref="vueFileAgent"
        v-model="fileRecords"
        :theme="'list'"
        :multiple="true"
        :deletable="true"
        :meta="true"
        :accept="'video/*'"
        :average-color="true"
        :max-size="'1000MB'"
        :max-files="5"
        :resumable="true"
        ...
  />
</client-only>

[safrazik]

Oops, I missed this from your comment:

Uncaught (in promise) Error: tus required. Please install tus-js-client

From the Docs:

You need to install [tus-js-client] for this to work. And you have to pass the tus object to plugins.tus as in the following example.

npm install tus-js-client --save
OR
yarn add tus-js-client

// import tus from 'tus-js-client'; // <== this won't work with latest tus-js-client
import * as tus from 'tus-js-client';
import { plugins } from 'vue-file-agent';

plugins.tus = tus;

NOTE the usage of: import * as tus from 'tus-js-client' - Importing default from tus-js-client, as mentioned in the Website docs may not work with latest update.