Im a vue noob and trying to figure out a way to integrate Parse SDK into a Nuxt app, it seems most examples are for vue and not so many for the latest Nuxt, I have defined a plugin in the nuxt config with this content
import Parse from 'parse/node';
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
Parse.initialize(
'13123123123123123',
null
);
Parse.serverURL = 'https://server.com/parse/';
// Vue.use(Parse)
nuxtApp.vueApp.use(Parse)
})
which results in Argument of type 'typeof Parse' is not assignable to parameter of type 'Plugin_2'.
I also tried this but i really dont know enough about nuxt or vuejs
import Vue from 'vue';
import Parse from 'parse/node';
Parse.initialize(
'13123123123123123',
null
);
Parse.serverURL = 'https://server.com/parse/';
Vue.use(Parse)
which resulted in Property 'use' does not exist on type
Related
I'm using Vue.js in my PHP project as a CDN (it's not a vue Cli project).
I want to use vue-resource to connect one of my vue methods to my ApiController but i don't know how to use this package in a js file.
By the way when i import it like this: import vueResource from 'vue-resource'
i get this error : Cannot use import statement outside a module
import vueResource from 'vue-resource'
use(vueResource);
new Vue({
el:'#panel-main-wrapper',
data : {
collapse:false
},
methods:{
loadCities(field){
this.$http.post('/api/getCities',{
'name' : this.$refs[field].value
}).then(function (data){
alert(data)
})
}
}
})
According to this blog post the correct way of including frequently used libraries (e.g. axios) in Vue.js 2 is to set them as property of Vue prototype object like this:
import axios from 'axios';
Object.defineProperty(Vue.prototype, '$axios', { value: axios });
Unfortunately, this approach is not working in Vue.js 3 anymore. So what is the correct way of importing library to be accesible in whole project? I would prefer not to set them as global variable (i.e. to the window object.)
To use provide/inject as an alternative
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
const app = createApp(App)
app.provide('axios', axios ) // <-- define here
app.mount('#app')
Then in any component you wanna use axios you would do this
app.component('todo-list-statistics', {
inject: ['axios'],
created() {
this.axios // --> Injected property
}
}
I think the best way to us a library in a vue 3 project is to use the depency injection
https://v3.vuejs.org/guide/component-provide-inject.html
however I simply recommend that you import the library where you really need it, to have a more accurate intellisense, and a better three-shaking
I registered Moment.js as a plugin, like this:
import Vue from 'vue'
import moment from 'moment'
moment.locale('pt_BR')
Vue.use({
install (Vue) {
Vue.prototype.$moment = moment
}
})
Now, I need to use this in my main.js filters
import './plugins/moment'
Vue.filter('formatDate', value => {
return this.$moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
})
Buth this return an error:
Error in render: "TypeError: Cannot read property '$moment' of
undefined"
Looks like you can not access this like in the vue components for filter methods.
By Evan You
This is intentional in 2.x. Filters should be pure functions and should not be dependent on this context. If you need this you should use a computed property or just a method e.g. $translate(foo)
I guess the best way is importing the moment on main.js like this:
import moment from 'moment'
Vue.filter('formatDate', value => {
return moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
})
Vue.filter() creates a global filter before the Vue instance is created, a global filter does not have access to the Vue instance therefore you can not access this.$moment. If you need to access the vue instance, you'll need to register a local filter on components.
However, you could rectify this by directly referencing the module:
import moment from 'moment';
Vue.filter('formatDate', value => {
moment(value, 'YYYY-MM-DD').format('DD/MM/YYYY')
});
I'm trying import js-cookies in my main.js
Main.js
import * as Cookies from "js-cookie";
Vue.use(Cookies)
Using in component
this.$Cookies.set('name', data.user, { secure: true });
Error
TypeError: Cannot read property 'set' of undefined
what is the problem?
I have tried a thousand ways and it still does not work.
Vue.use(name) is used to install a vue plugin. The package will need an install method that receives a vue instance.
#1
You can use the cookies packages without a plugin importing the module in the component
<script>
import Cookies from 'js-cookie';
export default {
methods: {
addCookie() {
console.log('adding the cookie');
Cookies.set('chocolate', 'chookies');
console.log(Cookies.get());
}
}
}
</script>
#2 you can add a VUE plugin and set a Cookies prototype function to the Cookies module.
(Prototype vue functions will be available for components, it's standard to prefix them with $).
src/CookiesPlugin.js
import Cookies from 'js-cookie';
const CookiesPlugin = {
install(Vue, options) {
Vue.prototype.$Cookies = Cookies;
}
};
export default CookiesPlugin;
src/main.js
import CookiesPlugin from './CookiesPlugin';
Vue.use(CookiesPlugin);
In the component
this.$Cookies.set('chocolate', 'chookies');
console.log(this.$Cookies.get());
You are using a NOT Vue (Vanilla JS library) library and you are trying to use it as a Vue resource.
Try using this one instead
I've been trying to get a datepicker plugin working in my Laravel Spark app with Vuejs.
I've tried adding to app.js:
var datepicker = require('vuejs-datepicker');
Vue.use(datepicker);
But I get
plugin.apply is not a function(…)
in the JS console.
I've also tried:
var datepicker = require('vuejs-datepicker').default;
Vue.use(datepicker);
which yields:
Uncaught TypeError: Cannot read property 'installed' of undefined(…)
Am I being dumb? As I can't find any references to my errors in this context.
I normally import this into a parent component .vue file e.g
<script>
import Datepicker from 'vuejs-datepicker'
export default {
components: {
Datepicker
}
}
</script>
<template>
<datepicker></datepicker>
</template>