We Keep Coding

Web push import from another file

I'm having a little problem, I have Web Push settings in one file called WebPush.ts and I want to import it to another file. but I'm getting an error.
WebPush.ts
import webpush from 'web-push'
export const WebPush = webpush.setVapidDetails(
`mailto:${process.env.ADMIN_EMAIL}`,
process.env.PUBLIC_VAPID_KEY!,
process.env.PRIVATE_VAPID_KEY!
)
and in another file I am importing it.
import { WebPush } from '../../Services/WebPush'
async somefunction(){
await WebPush.sendNotification(pushSubscripton, payload)
}
I'm getting this error:
Property 'sendNotification' does not exist on type 'void'.ts(2339)
But when I do settings in this file where I want to import this I Don't get error. How can I fix this?

Vue.js problem with importing class from another .js file

I am new to Vue and already ran into an issue that I can't solve.
I want to import a class from another .js file, where I will store my Axios requests. I have created a restDataFile.js file in my src folder:
import Axios from "axios";
const baseUrl = "my-api-address";
export default class {
async foo() {
await (Axios.get(baseUrl));
}
}
I wanted to import this class to another file (in my case it's my Vuex store file in my store/index.js file):
import RestDataSource from "./restDataSource";
Once I run build I get an error like this:
Failed to compile with 1 errors Error in ./src/restDataSource.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: _core.types.isBigIntLiteral is not a function (...)
Import works fine if I do not export a class, so for example it works if I modify my restDataSource.js file to export:
export default {
foo() { ... }
}
Is it an issue with babel configuration or something? Can't find any solution to this error on the web.

Is it possible to use route.meta property outside of the component?

I am using Vue 3 in my project and I used route.meta property inside the Vue component but when I moved that into .ts file it doesn't work anymore and in-browser appeared an error.
My .ts file:
import { useRoute } from "vue-router";
import { computed } from "vue";
const route = useRoute();
export const myfunction = computed(() => {
return route.meta.somedata;
});
Error from the browser:
Uncaught (in promise) TypeError: Cannot read property 'meta' of undefined
The same code works fine in .vue files.
Is there any way to use meta property outside of the .vue file?

I found a solution, firstly need to import the router file.
import router from "#/router/index";
Then using the router object we can get currentRoute.value and then access meta properties.
router.currentRoute.value.meta.someData
The final code should look like this:
import { computed } from "vue";
import router from "#/router/index";
export const myfunction = computed(() => {
return router.currentRoute.value.meta.someData;
});

Vue warn: Error in created hook: "TypeError: Cannot read property 'get' of undefined"

When I use axios I got this error:
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined"
export default {
methods: {
loadUsers(){
axios.get("api/user").then(data => (this.users = data));
}
},
created() {
this.loadUsers();
}
}
Routes:
api.php
Route::apiResources(['user' => 'API\UserController']);
Controller:
API/UserController.php
public function index()
{
return User::latest()->paginate(5);
}

You need to import Axios first:
import axios from 'axios'
export default {
// ... axios.get will work now
}

I was getting same error .this error comes due to the vue cannot identify the get property which is belongs to the 'vue-resource' package so my recommendation is need to import package it will help to resolse this issue follow below step
first check 'vue-resource' installed on your project
otherwise install it
npm install vue-resource
In main.js file include this
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);

Cannot read property 'ref' of undefined

I'm building a simple web app with Vue + Firebase + Vuefire and I get "Uncaught TypeError: Cannot read property 'ref' of undefined" when I try to use my Firebase db variable inside a component.
In main.js
Vue.use(VueFire)
const firebaseApp = Firebase.initializeApp({ //setting })
// Export the database for components to use.
export const db = firebaseApp.database()
And in my component
// in Recipes.vue
import {db} from '../main.js'
export default {
recipe: {
source: db.ref('recipes')
// Console says: "Uncaught TypeError: Cannot read property 'ref' of undefined"
}
}
I followed the steps in this tutorial https://alligator.io/vuejs/vuefire-firebase/
This code db.ref('recipes') works if used inside main.js, but it never works once I import it inside my component.

The problem was my Firebase code (including db variable) was inside main.js but it needed to be in it's own component. I created a firebase.js file :
import Firebase from 'firebase'
const firebaseApp = Firebase.initializeApp({
# configuration
})
// Export the database for components to use.
export const db = firebaseApp.database()
Then in my component I simply imported my database variable :
import {db} from '../firebase'
Why didn't it work inside main.js? I'm not sure, maybe someone more knowledgeable can answer that.

.ref is a firebase function, you need to import it. try
import Firebase from 'firebase'
or
import * from 'firebase'