1👍
The Vue syntax is still some standard JS, just with some added sugar, and as such, NPM packages can be imported inside your Vue components <script>
tag via a simple import.
For example:
import axios from 'axios';
export default {
...
methods: {
doSomething() {
axios.get(...)
}
}
}
Some packages might expose more defined methods and properties for you to import, in which case you can use what is called "destructuring" in order to import just what you need from the package as opposed to the whole package:
import { method_1, method_3, property_a } from 'myPackage';
export default {
data() {
return {
myComponentProperty: property_a
}
},
...
methods: {
doSomething() {
const a = 'something';
const b = method_1(a);
return b;
}
}
}
Generally speaking, just find your package on https://www.npmjs.com/ and look at the instructions to use it, you’ll have some examples on how to import and use it in your project.
0👍
Depends of the package you’re using, if it’s a simple date formater or if it’s a whole calendar with baked-in features already.
The first one can be chained/nested into a method as explained here.
The other one is quite harder and more advanced, and will require the usage of methods linked below:
- if you want to achieve that in Nuxt (meta-framework mainly used with Vue for SSR): https://stackoverflow.com/a/68485267/8816585
- for Vue, I guess this is still the way to go: https://vuejs.org/guide/components/provide-inject.html#inject
This article is a bit old but still relevant as of how to abstract and plug some vanilla JS code to your VueJS instance. I’m sure you can find even more like this one.
Since you’re new to JS/Vue, I recommend that you take things easy overall and use only the first type of packages that could be easily integrated.
Overall, get used to the whole ecosystem + way of doing things.
An easy way is sometimes to prefix/suffix your package, for example swiper can also be used thanks to swiper/vue
.
You can find a nice list of cool packages here overall: https://github.com/vuejs/awesome-vue
- [Vuejs]-How to use @nuxtjs/axios with @nuxtjs/composition-api and nuxt 2
- [Vuejs]-How to access property with v-if when template is moved to a custom component