I am new to vuejs and trying to access firebase real-time database in my app.
signup.vue
<template>
<div>
<p v-for="(data,index) in fbData" :key="index">{{data.id1}}</p>
</div>
</template>
<script>
import { validationMixin } from 'vuelidate'
import { required, email, minLength, maxLength } from 'vuelidate/lib/validators';
import { mapGetters, mapActions } from 'vuex';
import firebase from 'firebase/app';
import 'firebase/database';
let config = {
config properties
}
let app = firebase.initializeApp(config);
let db = app.database();
let datas = db.ref('users');
export default {
name:'signUp',
data() {
return {
fbData:{},
}
},
firebase:{
fbData:datas
}
</script>
but it doesn't display anything in the html. What I missed here? How can I access a firebase database in vuejs2?
issue solved by adding vuefire to the app.
Related
I wanted to access the vue.data or methods in the plugin.
no matter what I tried several times, it didn't work.
such as eventBus, Mixin etc...
so I'm curious about the possibility to call the methods like that.
thank you for reading this question.
here is the custom component.
<template>
<div>
<v-overlay :value="isProcessing">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
#Component
export default class ProgressCircular extends Vue {
private isProcessing: boolean;
startProcess() {
this.isProcessing = true;
}
}
</script>
and this is the plugin source.
import ProgressCircular from '#/components/ProgressCircular.vue';
import { VueConstructor } from 'vue';
import Vuetify from 'vuetify/lib';
import vuetify from './vuetify';
export default {
install(Vue: VueConstructor, options: any = {}) {
Vue.use(Vuetify);
options.vuetify = vuetify;
Vue.component('progress-circular', ProgressCircular);
Vue.prototype.$fireProgressing = function () {
// it didn't work
// I just wanted to access the method where in the Vue Component
// ProgressCircular.startProcess();
};
},
};
use the plugin syntax to extend vue like:
Vue.use({
install: Vue => {
Vue.prototype.$fireProgressing = () => {
};
}
});
or
Vue.use(YOURPLUGIN);
before you mount vue
I'm trying to use the Pinia Persisted State Plugin with Pinia in my Quasar app (Vue 3 / TypeScript).
Out of the box everything works fine.
But when using a Quasar boot file the persisted state stops working. Refreshing the page wipes all the new values away.
I don't know why the boot file breaks the persisted state plugin, but I have narrowed the culprit down to a single line...
This is how I am using Pinia with Quasar and adding the plugin:
src/store/index.ts
/* eslint-disable #typescript-eslint/no-unused-vars */
import { store } from 'quasar/wrappers';
import { createPinia, Pinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
declare module '#quasar/app' {
interface BootFileParams<TState> {
store: Pinia;
}
interface PreFetchOptions<TState> {
store: Pinia;
}
}
declare module '#vue/runtime-core' {
interface ComponentCustomProperties {
$store: import('pinia').Pinia;
}
}
export default store(function (_) {
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // Pinia Plugin added here
return pinia;
});
And this is what my Pinia store looks like:
src/store/user.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => {
return {
user: {
firstName: 'Mary',
},
};
},
persist: true, // Note that we are using a persisted state here
actions: {
setFirstName(firstName: string) {
this.user.firstName = firstName;
console.log('Name set to Pinia store: ', this.user.firstName);
},
getFirstName() {
if (!this.user.firstName) {
console.log('No name found in store. Setting "John" to Pinia store.');
this.user.firstName = 'John';
return this.user.firstName;
} else {
console.log('Name fetched from Pinia store: ', this.user.firstName);
return this.user.firstName;
}
},
},
});
Here is an example front-end page for fetching and setting the firstName:
src/pages/index.vue
<template>
<div>{{ firstName }}</div>
<q-form #submit="handleFirstNameSubmit">
<p>Change First Name</p>
<q-input v-model="firstNameInput" filled outline />
<q-btn label="Submit Name to Pinia Store" type="submit" />
</q-form>
<q-btn #click="handleFirstNameFetch" label="Fetch Name from Pinia Store" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from 'src/store/user';
const userStore = useUserStore();
const firstName = ref<string>();
const firstNameInput = ref<string>();
const handleFirstNameSubmit = () => {
if (firstNameInput.value) {
userStore.setFirstName(firstNameInput.value);
}
};
const handleFirstNameFetch = () => {
firstName.value = userStore.getFirstName();
};
</script>
Up to this point everything works fine.
I can set firstName to the Pinia store, refresh the page, and the new name is still in Pinia.
But when using const userStore = useUserStore(store) inside a boot file like the example below, the persisted state stops working:
src/boot/auth.ts
import { boot } from 'quasar/wrappers';
import { useUserStore } from 'src/store/user';
export default boot(({ store }) => {
const userStore = useUserStore(store);
// Do some other authentication stuff, setting initial user store values etc, below here...
});
Any idea what's going on? And how to fix it?
I think this plugin is much cleaner than using the alternate LocalStorage persisted state solution so I would love to get it working with Quasar.
everyone after a lot of research I found the answer to this issue,
you must pass index.ts/js for const like below:
this is worked for me in quasar.:)
<script lang="ts" setup>
import store from '../stores/index';
import { useCounterStore } from '../stores/counter';
const counterStore = useCounterStore(store());
counterStore.increment();
console.log(counterStore.count);
</script>
A common use case for Quasar applications is to run code before the root Vue app instance is instantiated.
If the app is not instantiated then the pinia plugin hasn't been installed yet. See: https://github.com/vuejs/pinia/discussions/723#discussioncomment-2110660
Can I use "WebGL Earth" or "globe.gl" in vue.js? I search a lot but what I found was that there is "react-globe.gl" for react developers, but can't find the same for vue.
If I can use any of them in vue, how can I import and initialize it?
I am currently am using globe.gl with vue 3, got it running like this.
Can also checkout a template repo I have https://github.com/GBerghoff/Globe.gl-with-Vue-3
<template>
<div ref="globeDiv"></div>
</template>
<script>
import Globe from "globe.gl";
import { ref, onMounted } from "vue";
export default {
setup() {
const globeDiv = ref(null);
onMounted(() => {
const myGlobe = Globe();
myGlobe(globeDiv.value).globeImageUrl(
"//unpkg.com/three-globe/example/img/earth-night.jpg"
);
});
return {
globeDiv,
};
},
};
</script>
I am able to use dayjs inside vue3 component by adding it to data()
import dayjs from 'dayjs'
export default {
data() {
return {
dayjs
}
}
}
Then I will be able to use it inside template but is this the correct way to do?
What if I want to configure dayjs and use it globally? I tried
import dayjs from 'dayjs'
import { createApp } from 'vue'
const app = createApp(App)
app.use(dayjs) // doesn't work
app.dayjs = dayjs // doesn't work
app.mount("#app')
but couldn't get it to work so far.
What is the correct way to do it?
u can use
import dayjs from 'dayjs'
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.$dayjs = dayjs
app.mount("#app')
The accepted method does not seem to take into account composition API. My understanding is that the only way to use this with Composition API is to provide/inject. Example below working with composition API, options API in script and templates.
//[main.js]
import dayjs from 'dayjs' //import dayjs in your main.js
app.provide('dayJS', dayjs) // provide dayJS
app.use(router).mount("#app") // mount app
// [component.js]
// Composition API setup ------------------
import { inject } from 'vue' // import inject from vue
const dayJS = inject("dayJS") // inject dayJS
//make sure that you return dayJS in setup along with any functions/variables
return { dayJS }
// Options API setup ------------------
app.component('mycomponent', {
inject: ['dayJS'],
created() {
console.log(dayJS())
}
})
//You can now use dayJS directly within setup ex: dayJS() or template ex: {{dayJS()}}.
You can use provide/inject to use dayjs inside of your component.
//main.js
import dayjs from 'dayjs'
import { createApp } from 'vue'
const app = createApp({
provide() {
return {
$dayjs: dayjs // <-- provide
}
},
app.mount("#app')
//myComponent.vue
<template>
DajsJS: {{ myDays }}
</template>
<script>
export default {
name: 'myComponent',
inject: ['$dayjs'], // <-- inject
computed: {
myDays() {
return this.$dayjs('1990-01-01')
}
}
}
</script>
If you are using composition api you can use direct dayjs without having to pass it through a provider. Look at the following example.
<template>
<section>
<h1>Título de ejemplo</h1>
<h2>
Fecha de creación
{{ dayjs('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)').format('DD/MM/YYYY HH:mm') }}
</h2>
<h3>
Otra prueba {{ date }}
</h3>
</section>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import dayjs from "dayjs";
export default defineComponent({
name: 'Ejemplo',
setup() {
const date_example = ref<string>('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)');
const date = computed<string>((): string => {
return dayjs(date_example.value).format('DD/MM/YYYY HH:mm');
});
return {
dayjs,
date,
}
}
});
</script>
//[main.js]
import dayjs from "dayjs"; //import dayjs in your main.js
app.provide("dayJS", dayjs); // provide dayJS
app.config.globalProperties.$dayjs = dayjs; // //You can now use dayjs as $dayjs
app.use(router).mount("#app") // mount app
while I am trying to load page it's showing me error "TypeError: Cannot read property 'state' of undefined". As per documentation I have tried this bus not loading store.
<template>
<div>
</div>
</template>
<script>
import { store } from '#/components/tenant/store/store'
import Vue from 'vue'
export default {
store:store,
data: () => {
return {
}
}
}
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const userStore = new Vuex.Store({
state: {}
})
Maybe I have misunderstood your question, but since you're exporting the const userStore, don't you need to do the following:
import { userStore } from '#/components/tenant/store/store';