Code for life
Code for life

Reputation: 11

How to call third party api in nuxt?

How can I run third party API in nuxt2? This is my nuxt.config.js setup , I tried to use proxy also not working or I need to setup something? I am new to Nuxt.

import colors from 'vuetify/es5/util/colors.js'
import path from 'path'

export default {
  mode: 'universal',
  devtools: true,
  // Global page headers: https://go.nuxtjs.dev/config-head

  head: {
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },

      { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
      { 'http-equiv': 'Cache-Control', content: 'no-store, no-cache, must-revalidate' },
      { 'http-equiv': 'Pragma', content: 'no-cache' },
      { 'http-equiv': 'Expires', content: '0' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },


  alias: {
    '@': '~/'
  },

  plugins: [
    { src: '~/plugins/index.js' }, 
    { src: './plugins/plugin/i18n.js' },
    { src: './plugins/plugin/axios.js' },
  ],

  router: {
    middleware: 'authMiddleware',
    extendRoutes(routes, resolve) {
      // Define your custom routes
      const customRoutes = [
        { path: '/', name: '', component: resolve(path.resolve('pages/index.vue')) },
        { path: '/login', name: 'login', component: resolve(path.resolve('pages/merchant/views/auth/login.vue')) },
        { path: '/account', name: 'account', component: resolve(path.resolve('pages/merchant/views/account/index.vue')) },
        { path: '/report', name: 'report', component: resolve(path.resolve('pages/merchant/views/report/index.vue')) },
      ];
      routes.push(...customRoutes);

    }
  },
  components: true,

  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/device',
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/toast',
    '@nuxtjs/auth-next'

  ],

  toast: {
    position: 'top-center',
    duration: 2000
  },

  auth: {
    redirect: {
      login: "/login",

      logout: "/",

    },
    strategies: {
      local: {
        token: {
          property: 'data.token',
          required: true,
          type: 'Bearer',
          global: true,
        },
        user: {
          property: 'data.user',
          autoFetch: true,
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/me', method: 'get' },
        },
      },
    },
  },
  store: '~/store',
  image: {
    dir: 'assets/images'
  },

  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/api.js' }
  ],

  axios: {
    proxy: true,
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    credentials: true,

  },

  proxy: {
    '/api/': {
      target: 'https://abctestapi.com', // Your API endpoint
      pathRewrite: { '^/api/': '' },
      changeOrigin: true
    }
  },

}

I got a CORS error whenever I call the login

https://abctestapi.com/api/auth/login

endpoints in the auth not sure whether I setup it correctly?

Upvotes: 0

Views: 95

Answers (0)

Related Questions