Vue 2 Integration

Vue 2.7 And Vue 2.6

Vue 2 projects can use native component packages without switching to an iframe-only integration.

Vue 2.7

npm install @file-viewer/vue2.7 @file-viewer/preset-office

Installing only @file-viewer/vue2.7 gives you the lightest native Vue 2.7 component. Add presets or renderer packages for concrete PDF, Office, CAD, Typst, archive, and engineering formats. For Webpack, Rspack, Rollup, Umi, and non-Vite applications, pass the capability through options.preset:

import officePreset from '@file-viewer/preset-office'

const viewerOptions = {
  preset: officePreset,
  rendererMode: 'replace',
  theme: 'light',
  styleIsolation: 'shadow',
  toolbar: { position: 'bottom-right' }
}

Use styleIsolation:'shadow' when the host page has aggressive global CSS, low-code resets, or micro-frontend style collisions. Vue 2 packages keep historical compatibility by default. See Style Isolation And Customization for tokens and ::part() customization.

Vite projects can add the plugin to avoid manual preset imports. Installing the package alone is not enough because Vite plugins must be registered once; after registration the plugin auto-discovers installed presets:

npm install -D @file-viewer/vite-plugin

import { defineConfig } from 'vite'
import { fileViewerRenderers } from '@file-viewer/vite-plugin'

export default defineConfig({
  plugins: [
    fileViewerRenderers({
      copyAssets: true
    })
  ]
})

import Vue from 'vue'
import FileViewer from '@file-viewer/vue2.7'

Vue.use(FileViewer)

<template>
  <div class="preview-shell">
    <file-viewer
      url="/files/report.pdf"
      :options="viewerOptions"
      @viewer-event="onViewerEvent"
    />
  </div>
</template>

<script>
import officePreset from '@file-viewer/preset-office'

export default {
  data() {
    return {
      viewerOptions: {
        preset: officePreset,
        rendererMode: 'replace',
        theme: 'light',
        toolbar: { position: 'bottom-right' }
      }
    }
  },
  methods: {
    onViewerEvent(event) {
      console.log(event.type)
    }
  }
}
</script>

Vue 2.6

npm install @file-viewer/vue2.6 @file-viewer/preset-office

Use the same component API as Vue 2.7. Keep your host container at a fixed or viewport-relative height. Switch @file-viewer/preset-office to @file-viewer/preset-all when heavy users need the full format matrix in one install:

npm install @file-viewer/vue2.6 @file-viewer/preset-all

Full packages are also available when you want the complete matrix by default: use @file-viewer/vue2.7-full for Vue 2.7 and @file-viewer/vue2.6-full for Vue 2.6.

npm install @file-viewer/vue2.7-full

import Vue from 'vue'
import FileViewer from '@file-viewer/vue2.7-full'

Vue.use(FileViewer)

Use formats, renderers, scan:true, inject:false, or chunkStrategy:'renderer' only for explicit registry control. Normal projects should keep fileViewerRenderers({ copyAssets:true }) and let the plugin auto-activate installed presets.

Vue 2.6 + Vue CLI 3 / webpack 4

If importing @file-viewer/preset-office breaks the build but commenting it out lets the app compile, the Vue 2.6 component is usually not the failing part. The office preset pulls PDF, Word, Excel, PPTX, and OFD renderer dependencies into the bundle; Vue CLI 3 / webpack 4 does not transpile node_modules by default and does not understand every package exports subpath or import.meta.url worker pattern.

The repository includes a standalone runnable demo based on this legacy stack:

cd examples/vue2.6-cli3-office
npm install
npm run serve

On Node 17+, webpack 4 may need:

NODE_OPTIONS=--openssl-legacy-provider npm run build

Prefer copying the demo vue.config.js first, then trim it after the customer build is stable. The required ideas are: transpile selected modern dependencies, alias the core subpath entries for webpack 4, and copy worker/WASM/font assets into public/file-viewer/.

// vue.config.js
const path = require('path')

const resolvePackageRoot = packageName => path.dirname(require.resolve(`${packageName}/package.json`))
const resolvePackageFile = (packageName, relativePath) => path.join(resolvePackageRoot(packageName), relativePath)

module.exports = {
  transpileDependencies: [
    /@file-viewer/,
    /pdfjs-dist/,
    /e-virt-table/,
    /styled-exceljs/
  ],
  configureWebpack: {
    resolve: {
      alias: {
        '@file-viewer/core/assets$': resolvePackageFile('@file-viewer/core', 'dist/assets.js'),
        '@file-viewer/core/browser$': resolvePackageFile('@file-viewer/core', 'dist/browser.js'),
        '@file-viewer/core/headless$': resolvePackageFile('@file-viewer/core', 'dist/headless.js')
      },
      extensions: ['.mjs', '.js', '.vue', '.json']
    }
  }
}

The demo also includes two webpack 4 compatibility patches: build/rename-pdfjs-webpack-require.cjs renames the bundled PDF.js legacy .mjs webpack helper so it does not shadow the host webpack 4 __webpack_require__, and build/babel-transform-import-meta-url.cjs lets webpack 4 parse the PPTX worker module. The serve env files set NODE_ENV=production to avoid Vue CLI 3.1 injecting its HMR client into this legacy preview path.

Then pass the preset and self-hosted asset URLs explicitly:

import officePreset from '@file-viewer/preset-office'

const assetBaseUrl = './file-viewer/'

export const viewerOptions = {
  preset: officePreset,
  rendererMode: 'replace',
  theme: 'light',
  styleIsolation: 'shadow',
  pdf: {
    workerUrl: `${assetBaseUrl}vendor/pdf/pdf.worker.mjs`,
    cMapUrl: `${assetBaseUrl}vendor/pdf/cmaps/`,
    wasmUrl: `${assetBaseUrl}vendor/pdf/wasm/`,
    standardFontDataUrl: `${assetBaseUrl}vendor/pdf/standard_fonts/`
  },
  docx: {
    workerUrl: `${assetBaseUrl}vendor/docx/docx.worker.js`,
    workerJsZipUrl: `${assetBaseUrl}vendor/docx/jszip.min.js`
  },
  presentation: {
    workerUrl: `${assetBaseUrl}vendor/pptx/pptx.worker.js`
  },
  spreadsheet: {
    workerUrl: `${assetBaseUrl}vendor/xlsx/sheet.worker.js`
  }
}

Vue CLI 3 / webpack 4 can keep working for modern browsers. If a project still requires IE11-level output or an old uglifyjs-webpack-plugin pass over the full office dependency graph, prefer upgrading the minifier/build chain or isolating the viewer through @file-viewer/vue2.6-full or the Web Component IIFE package.

Historical Package

@flyfish-group/file-viewer remains the compatibility line for Vue 2.7. New projects should prefer @file-viewer/vue2.7 or @file-viewer/vue2.6.