Skip to main content
Vue Print It is available as an npm package and can be installed using your preferred package manager.

​
Prerequisites

Before installing Vue Print It, ensure you have:
  • Node.js 16.0.0 or higher
  • Vue 3.0.0 or higher

​
Package managers

Choose your preferred package manager to install Vue Print It: 
npm install vue-print-it

​
Verify installation

After installation, you can verify that Vue Print It was installed correctly by checking your package.json file:
package.json
{
  "dependencies": {
    "vue": "^3.4.0",
    "vue-print-it": "^0.0.1"
  }
}

​
Framework-specific setup

Depending on your framework, you may need additional configuration.

​
Standard Vue 3 app

For standard Vue 3 applications created with Vite or Vue CLI, no additional setup is required. Proceed to the quickstart guide to register the plugin.

​
Nuxt 3

For Nuxt 3 projects, create a client-side plugin:
1

Create plugin file

Create a new file at plugins/vue-print-it.client.ts:
plugins/vue-print-it.client.ts
import { createVuePrintIt } from 'vue-print-it'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createVuePrintIt({
    windowTitle: 'Print Document',
    preserveStyles: true,
    autoClose: true
  }))
})
The .client.ts suffix ensures the plugin only runs on the client side, which is necessary for printing functionality.
2

Use in components

The plugin is now available in all your Nuxt components:
pages/index.vue
<template>
  <div>
    <div id="content">Content to print</div>
    <button @click="$print('content')">Print</button>
  </div>
</template>

​
Quasar Framework

For Quasar projects, use a boot file:
1

Create boot file

Generate a new boot file:
quasar new boot vue-print-it
2

Configure boot file

Edit src/boot/vue-print-it.ts:
src/boot/vue-print-it.ts
import { boot } from 'quasar/wrappers'
import { createVuePrintIt } from 'vue-print-it'

export default boot(({ app }) => {
  app.use(createVuePrintIt({
    windowTitle: 'Quasar Print Document',
    preserveStyles: true,
    autoClose: true,
    timeout: 1000
  }))
})
3

Register in quasar.conf.js

Add the boot file to your Quasar configuration:
quasar.conf.js
module.exports = function (/* ctx */) {
  return {
    boot: [
      'vue-print-it'
    ]
  }
}

​
TypeScript support

Vue Print It includes built-in TypeScript definitions. No additional type packages are required. To use types in your project: 
import { usePrint, type PrintOptions } from 'vue-print-it'

const { print } = usePrint()

const options: PrintOptions = {
  windowTitle: 'My Document',
  specs: { width: 800, height: 600 },
  preserveStyles: true
}

await print('element-id', options)

​
Next steps

Quick start

Learn how to use Vue Print It in your components

Build docs developers (and LLMs) love

Get started for freeTalk to us