Vue.js Getting Started

Starting from version 4.5.0.0, DEXTUploadX5 (hereinafter X5) supports Vue.js environments. To use X5 in Vue.js, use the dextuploadx5-vue package.

This document explains the minimum configuration, based on Vue 3 and Vite, up to the point where the X5 list-type UI is created in the browser.

Package roles

• dextuploadx5-vue: Provides the Vue plugin, UI components, and control objects required to use X5 in Vue.js.
• dextuploadx5-vue-vite: An auxiliary package that helps place X5 static resources into the project's static path in a Vite environment.
• dextuploadx5-express-handler: A server-side handler package used to process X5 upload requests in an Express server.

Install packages

# Client project
npm install vue dextuploadx5-vue
npm install -D vite @vitejs/plugin-vue dextuploadx5-vue-vite

Place X5 static resources

The browser loads the scripts and resources required by X5 based on productPath. Therefore, the actual X5 product files must exist under that path.

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import { withDEXTUploadX5 } from "dextuploadx5-vue-vite";

export default defineConfig({
  plugins: [
    vue(),
    ...withDEXTUploadX5()
  ]
});

With the configuration above, the browser will generally access X5 resources through the /dx5/ path. If you do not use the helper package, copy node_modules/dextuploadx5-vue/dist/dx5 directly into the application's static file path.

Provide authKey and productPath

Install DEXTUploadX5Plugin when creating the Vue application, and configure the auth key and productPath.

import { createApp } from "vue";
import App from "./App.vue";
import { DEXTUploadX5Plugin } from "dextuploadx5-vue";

createApp(App)
  .use(DEXTUploadX5Plugin, {
    authKey: "jn+xziPdVh6f5KN17uFH... skip ...WiXAyO2FdI9r5XGfwxQ=",
    productPath: "/dx5/"
  })
  .mount("#app");

If productPath and the actual static file placement path do not match, the component will not be created correctly.

Create the list-type UI

<script setup>
import { ref } from "vue";
import { DX5, DEXTUploadX5List } from "dextuploadx5-vue";

const version = ref("");

function handleCreated(id) {
  const dx = DX5.get(id);
  version.value = dx.getVersion();
}

function handleError(id, code, msg) {
  alert(id + " => " + code + "\n" + msg);
}
</script>

<template>
  <DEXTUploadX5List
    id="dext5"
    :style="{ width: '100%', height: '320px' }"
    @created="handleCreated"
    @error="handleError"
  />
  <p>DEXTUploadX5 Version: {{ version }}</p>
</template>

Verify execution

• The browser can load the X5 resources from productPath correctly.
• A valid auth key is delivered.
• DEXTUploadX5Plugin is installed in the Vue application.
• API communication between the client and server is not blocked.

If the X5 list area appears and version information is confirmed in the @created event, the basic initialization in the Vue.js environment is complete.