DEV Community

Muhammad-Moftah
Muhammad-Moftah

Posted on

Question: How to import Nuxt object in External JS file? to allow me to use all project plugins

#nuxt #vue #javascript

How to import Nuxt object in External JS file?
to allow me to use all project plugins
such as
this.$axios
this.$store

Image description

Top comments (3)

Collapse
 
kissu profile image
Konstantin BIFERT •

You can't really do that because the Nuxt instance is not natively supported in a vanilla JS file, but you could write your function by supposing it does have the context.
For example, if you have a JS file that does some kind of logic and it needs the help of Nuxt's context, you write it like this

export const amazingFunction = (nuxtContent) => nuxtContext.$fetch('https://...')
Enter fullscreen mode Exit fullscreen mode

So, create your JS function like it does have the context, and when you're calling it in your .vue file, you can call it with something like this

<script>
import { amazingFunction } from '~/utils.js'

export default {
  async mounted() {
    const result = await amazingFunction(this)
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nonciok89 profile image
Noncio •

hello

i have a nuxtjs project of listing booking

I have done all my API cal and configuration on " index.js in the store folder " and would link to display the listing gotten from the API call on my "listing.vue page " please how do I call do to print my data gotten or make my index.js accessable all over the app

app setup

{
"name": "lisngbook,,
"version": "1.0.0",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
},
"devDependencies": {
"@nuxtjs/moment": "^1.6.1"
},

Collapse
 
kissu profile image
Konstantin BIFERT •

Hey, I've answered you on Stackoverflow: stackoverflow.com/questions/749019... 😉

Read next

shubham_ingale profile image

Chnp-cli: Code Highlight and Print tool

ShGI -

itamartati profile image

What Is Client-Side Rendering (CSR) in Web Development?

Itamar Tati -

robertobutti profile image

WebSocket broadcasting with JavaScript and Bun

Roberto B. -

abdelraman_ahmed_e83db59f profile image

Building a RichText Editor with TipTap in React (with Mentions)

Abdelraman Ahmed -