How do we import js file from cdn?
I am building a custom component (a wrapper component) to view the pdf files. and for this I need to use pdf.js file from cdn and I am unable to import the file?
following does not work
import "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js";
To import the JS file from CDN and use in vue.js component, you can use mounted lifecycle and there you need to append your script into DOM.
Then it will be available into your window global variable.
Working code example:
mounted () {
let pdfJS = document.createElement('script')
pdfJS.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js')
document.head.appendChild(pdfJS)
// for checking whether it's loaded in windows are not, I am calling the below function.
this.checkPDFJSLib()
},
methods: {
checkPDFJSLib() {
console.log(window.pdfjsLib)
}
}
You can normally include it in your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
Alternatively, you can use an npm library e.g vue-pdf
install it into your modules
npm install --save vue-pdf
and use it
import pdf from 'vue-pdf'
Related
I am using the Vue CLI Plugin Electron Builder and whenever I try to include electron ipcRenderer inside of my Vue component using
import ipcRenderer from 'electron'
I get this error
Module not found: Error: Can't resolve 'path' in '/Users/myname/IdeaProjects/project/node_modules/electron'
How would i fix this?
I eventually solved this by adding this to my vue.config.js
electronBuilder: {
preload: 'src/preload.js'
}
Then in my browser window I could load a preloader like normal.
Next in my preload i added this
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
Now I can use window.ipcRenderer in the renderer!
In one of my projects, I build a nice vue3 component that could be useful to several other projects. So I decided to publish it as an NPM package and share it with everyone.
I wrote the isolate component, build it and publish BUT I use Tailwind css to make the style.
When I publish and install the component everything is working BUT without the beauty of the css part.
I tried several configurations and alternative tools to generate the package that automatically add the tailwind as an inner dependency to my package.
Does someone have experience with this? how can build/bundle my component by adding the tailwind CSS instructions into it?
You're almost there
Since you've got your component working, the majority of the part has been done.
For configuring the styling of the component you need to identify the Tailwind CSS classes being used by your Vue component package and retain them in the final CSS that is generated by the Tailwind engine in your project.
Follow below steps in the project where you want to use your tailwind vue component package.
For Tailwind CSS V3
// tailwind.config.js
module.exports = [
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
]
For Tailwind CSS V2
// tailwind.config.js
module.exports = [
//...
purge: {
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
//...
}
]
The content property in the tailwind.config.js file defines file path pattern that the tailwind engine should look into, for generating the final CSS file.
For Pro users
You may also try to automate the above setup by writing an install script for your npm package to add this configuration to the tailwind.config.js file
References
Tailwind Docs - 3rd party integration
It's a bit difficult for someone to answer your question as you've not really shared the source code, but thankfully (and a bit incorrectly), you've published the src directory to npm.
The core issue here is that when you're building a component library, you are running npm run build:npm which translates to vue-cli-service build --target lib --name getjvNumPad src/index.js.
The index.js reads as follows:
import component from './components/numeric-pad.vue'
// Declare install function executed by Vue.use()
export function install (Vue) {
if (install.installed) return
install.installed = true
Vue.component('getjv-num-pad', component)
}
// Create module definition for Vue.use()
const plugin = {
install
}
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null
if (typeof window !== 'undefined') {
GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue
}
if (GlobalVue) {
GlobalVue.use(plugin)
}
// To allow use as module (npm/webpack/etc.) export component
export default component
There is no mention of importing any CSS, hence no CSS included in the built version.
The simplest solution would be to include the index.css import in your index.js or the src/components/numeric-pad.vue file under the <style> section.
Lastly, I'm a bit rusty on how components are built, but you might find that Vue outputs the CSS as a separate file. In that case, you would also need to update your package.json to include an exports field.
When building a Vue library (component), according to Vue docs, you can set css.extract: false in vue.config.js to avoid the users having to import the CSS manually when they import the library into an app:
vue.config.js
module.exports = {
css: {
extract: false
}
}
However, when you do that, the icons are not displayed in the production build.
In this case I'm using #mdi/font and weather-icons. Neither of them load:
To reproduce
You can reproduce this with this Vue library (component):
Create new Vue project with vue create test
Clone the repo and put in the same directory as the Vue test project
In vue-open-weather-widget set css.extract: false in vue.config.js;
And comment out CSS import:
import 'vue-open-weather-widget/dist/vue-open-weather-widget.css'
Build vue-open-weather-widget with yarn build
Import it into the test Vue app with yarn add "../vue-open-weather-widget";
Serve the test app yarn serve
I have looked at your lib (nice component BTW). I created a build with css: { extract: false } and first looked at the behavior when importing vue-open-weather-widget.umd.js directly into an HTML file. And that worked without any problems.
The thing is that the fonts remain external in the dist after the build. And it seems that there is a problem to find the fonts when your component is loaded in a Webpack project (in our case Vue CLI project). I don't know why the fonts are not referenced correctly. But I have found another, and possibly a better solution.
As it is stated in the MDI docs, the use of the web fonts can negatively affect the page performance. When importing only one icon, all of them are imported, which in turn increases the bundle size. In such a small component this is more than suboptimal, especially for the component users. Therefore here is the alternative solution, also suggested by MDI:
Use #mdi/js instead of #mdi/font
Remove all #mdi/font references in your code and install deps:
npm install #mdi/js #jamescoyle/vue-icon
Replace all icons with SVG(e.g. in MainView.vue). Note that on this way only icons are included in the bundle that are used in your components:
...
<span #click="state.settings.view = 'settings'">
<svg-icon type="mdi" :path="mdiCogOutline"></svg-icon>
</span>
...
import SvgIcon from '#jamescoyle/vue-icon'
import { mdiCogOutline } from '#mdi/js'
...
components: {
SvgIcon
},
data () {
return {
mdiCogOutline: mdiCogOutline
}
},
Adjust vue.config.js:
module.exports = {
css: {
extract: false
}
}
Build component:
# i would also include --formats umd-min
vue-cli-service build --target lib --formats umd-min --name vue-open-weather-widget src/main.js
Now your dist contains only 192.68 KiB vue-open-weather-widget.umd.min.js and the component is ready to use over CDN or in a Vue CLI Project, without importing any CSS or fonts. I have tested both cases. Here is how it looks like:
Hope it helps you! Feel free to ask if you have further questions.
I searched all over the internet but found nothing. I know this is a noob question.
I installed jspdf and jspdf-autotable over npm in my vue project:
npm install jspdf --save
npm install jspdf-autotables --save
Packages installed successfully. I'm importing jspdf and jspdf-autotable in main.js file like that:
import jsPDF from 'jspdf';
import 'jspdf-autotable';
Vue.use(jsPDF)
Then in my .vue file I import jsPDF first:
import jsPDF from 'jspdf';
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
But autoTable is not imported. It says unresolved method or hook autotable. I get empty pdf.
I don't know how to import autoTable. Please help me. It's one day left to finish my job. Sorry I'm new to Vue js. Many thanks in advance!
Good question, but not necessary you use this in your main file, you can use this in your specific file (for performance reasons). The autotable is one complement to work with table in your JsPdf. This necessary only load the file in your component.
e.g.:
import JsPDFAutotable from 'jspdf-autotable'
and your component
components: { JsPDFAutotable }
you don't need the imports in the main.js file.
Do you import directly in your .vue file. that work well.
import jsPDF from 'jspdf'
import 'jspdf-autotable'
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')