CODEWITHSUNDEEP
vue.jswebpackbabel-loadervue-loaderpagedjs
Deepak Walia
Deepak Walia

Reputation: 1

How to use Paged.js in Vue.js2?

let paged = new Previewer();
paged.preview('test', \[\], document.body).then((flow) =\> {
console.log("Rendered", flow.total, "pages.");
});

Facing issue: 

1:1188-1197 export 'Previewer' was not found in 'pagedjs'

error  in ./node_modules/pagedjs/dist/paged.js

Module parse failed: Unexpected token (3072:8)
You may need an appropriate loader to handle this file type.
|               }
|
|               async \*layout(content, startAt) {
|                       let breakToken = startAt || false;
|                       let tokens = \[\];

In webpack.base.config.js:

{ test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/paged')] }

{ test: /.js$/, include: [ resolve('node_modules/pagedjs') // Include pagedjs for transpilation ], use: [ { loader: 'babel-loader' } ] }

here is package.json devDependencies file:

{ "version": "1.0.0", "description": "node tech template", "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "npm run dev", "build": "node build/build.js", "deploy": "firebase deploy --only hosting" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.6", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.11", "eslint": "^5.1.0", "eslint-config-airbnb": "^17.0.0", "eslint-config-prettier": "^2.9.0", "eslint-plugin-jsx-a11y": "^6.1.0", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.21.4", "eventsource-polyfill": "^0.9.6", "express": "^4.16.2", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "http-proxy-middleware": "^0.20.0", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.26", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^2.2.0", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.6.10", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.18.2", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

Upvotes: 0

Views: 177

Answers (1)

naveenv
naveenv

Reputation: 77

Try referring this, It worked on my vue 2 project, check for packages installed properly : https://doc.doppio.sh/article/using-pagedjs-with-vue3.html

Replace script part with this

<script>
    import Previewer from 'pagedjs';
    export default {
      mounted () {
         const paged = new Previewer();
         paged.preview().then((flow) => {
         console.log('Rendered', flow.total, 'pages.');
      });
     }
    };</script>

Upvotes: 1

Related Questions