Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Print
✓ import Print from 'vue-print-nb'
✗ import { Print } from 'vue-print-nb'
Used for global registration in Vue 2 via `Vue.use(Print)`. It's a default export from the `vue-print-nb` package.
print
✓ import print from 'vue-print-nb'
✗ import { print } from 'vue-print-nb'
Used for local registration in Vue 2 applications. It's a default export.
print
✓ import print from 'vue3-print-nb'
✗ import { print } from 'vue3-print-nb'
Used for both global (`app.use(print)`) and local registration in Vue 3 applications. It's a default export from the separate `vue3-print-nb` package.
This quickstart demonstrates how to set up `vue3-print-nb` globally and use the `v-print` directive to print a local HTML element, including custom options like extra CSS, a pop-up title, and lifecycle callbacks.
import { createApp, ref } from 'vue'
import print from 'vue3-print-nb'
const app = createApp({
setup() {
const printLoading = ref(true)
const printObj = {
id: 'printMe',
popTitle: 'Good Print Example',
extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
beforeOpenCallback (vue) {
printLoading.value = true
console.log('Before print opened')
},
openCallback (vue) {
printLoading.value = false
console.log('Print executed')
},
closeCallback (vue) {
console.log('Print tool closed')
}
}
return {
printLoading,
printObj
}
},
template: `
<div>
<div id="printMe" style="background: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<p>This is content inside the print area.</p>
<p>It demonstrates local range printing with custom styles.</p>
<p>Another paragraph to show content flow.</p>
</div>
<button v-print="printObj">Print Local Range (with options)</button>
<div id="loading" v-show="printLoading">Loading print preview...</div>
</div>
`
})
app.use(print)
app.mount('#app')
Debug
Known issues
breakingVue 2 and Vue 3 versions of this library are distinct packages: `vue-print-nb` for Vue 2 and `vue3-print-nb` for Vue 3. Using the wrong package for your Vue version will result in errors and incompatibility.fixFor Vue 2 projects, use `npm install vue-print-nb`. For Vue 3 projects, use `npm install vue3-print-nb`. Ensure your import statements and global/local registration methods align with the correct package.
affects: all
gotchaWhen using the `url` option to print content from an external source, you may encounter Cross-Origin Resource Sharing (CORS) errors. Browsers enforce same-origin policy, preventing scripts from making requests to different domains unless explicitly allowed by the server.fixEnsure the external URL's server includes appropriate `Access-Control-Allow-Origin` headers that permit your application's origin. For development, consider using a proxy in your Vue CLI configuration or a CORS proxy service.
affects: >=1.0.0
gotchaIf no specific element `id` or `url` is provided to the `v-print` directive, the entire current page's HTML content will be sent to the printer. This might lead to unintended layouts or printing extraneous elements.fixAlways explicitly define the `id` of the target HTML element (e.g., `v-print="'#my-element-id'"`) or specify a `url` in the options object if you intend to print only a portion of the page or an external resource.
affects: >=1.0.0
deprecatedFor Vue 2, global installation using `Vue.use(Print)` might lead to global instance pollution if multiple Vue apps with different plugins are needed on the same page. Vue 3's `createApp` approach isolates plugin installations per application instance.fixWhile functional in Vue 2, consider local directive registration (`directives: { print }`) for better modularity. For Vue 3, `app.use(print)` correctly scopes the plugin to the specific application instance. affects: <2.x.x (Vue 2 `vue-print-nb`)
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'use')
Attempting to use `Vue.use()` with `vue3-print-nb` in a Vue 3 project, or calling `app.use()` with `vue-print-nb` in a Vue 3 project before the app is created. Or attempting to use `vue-print-nb` in a Vue 3 project where the global `Vue` instance is not available.
fixEnsure you are installing the correct package (`vue-print-nb` for Vue 2, `vue3-print-nb` for Vue 3). For Vue 3, global installation requires `app.use(print)` after `const app = createApp(App)`.
Access to XMLHttpRequest at 'http://example.com/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The server hosting the URL content to be printed does not allow requests from your application's origin, violating the browser's same-origin policy.
fixConfigure the remote server to include the `Access-Control-Allow-Origin` header with your application's domain (e.g., `http://localhost:8080`) or a wildcard `*` (less secure). Alternatively, use a development proxy in `vue.config.js` or a CORS proxy service.
Audit
Dependencies
vuerequiredPeer dependency for Vue 2 applications using `vue-print-nb`.
vuerequiredPeer dependency for Vue 3 applications using `vue3-print-nb`.