Utilizing the .env values in nuxt.config.js using runtime configuration - A step-by-step guide

I'm trying to figure out how to utilize a .env value in nuxt.config.js using runtime config.

It's easy to declare and use it in regular code.

  publicRuntimeConfig: {
    URL_API: process.env.URL_API || 'http://localhost:8000/',
  },

However, I want to use the .env value like this in my nuxt.config.js:

  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          required: true,
          maxAge: 1000 * 60 * 60
        },
        user: {
          property: 'user',
          autoFetch: false
        },
        clientID: true,
        endpoints: {
          login: { url: `${process.env.URL_API}/auth/login`, method: 'post' },
          logout: { url: `${process.env.URL_API}/auth/logout`, method: 'post' },
        },
        tokenType: ''
      }
    },
    redirect: {
      login: '/auth/login',
      logout: '/',
      callback: '/auth/login',
      home: '/'
    }
  },

Any suggestions on how to achieve this?

Answer №1

For a more detailed explanation, check out my response on this topic:

In case you have certain modules listed in nuxt.config.js, the only way to pass environment variables is through process.env.MY_VARIABLE.
However, it does work when linking to an outside file.

Answer №2

If you want to access variables stored in a .env file within your nuxt.config.js, consider utilizing the dotenv package.

Your nuxt.config.js should include the following code snippet:

// add any necessary imports

require('dotenv').config()

// configure your Nuxt settings here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing Elements within a Loop in VueJS3

I have a component layout structured as shown below: <div class="list-item" v-for="item in items" :key="item.id"gt; <div class="sub-item"></div> </div> The issue I'm encountering is how to ...

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

I've integrated the aws-iot-device-sdk into our reactjs application. However, we encountered an error while trying to execute the command NODE_ENV=production npm run compile. The error message I received pertains to a syntax issue in the file paths me ...

When making a request through local apache, the POST method is switched to GET

I've been attempting to send a post request using the code below. However, the request is being sent as a GET instead of POST. How can I resolve this issue? $.ajax({ url: 'https://www.exampleurl.com', method: 'POST', h ...

The NextJs router encountered an unknown key passed through the urlObject during the push operation

I have a Next.js/React application where I am utilizing the Next Router to include some queries in my URL. However, when using the following function, the Chrome Dev Console displays numerous warnings: const putTargetsToQueryParams = (targets: IFragrance ...

Node.js/Express API Endpoint Ceases Functioning

In my Angular/Express.js app, there is a post method within my api.service.ts file: post(data: any, endpointUrl: string): Observable<T> { console.log("REACHED POST METHOD") return this.http.post<T>(`${this.apiUrl}/${endpoint ...

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

My Ajax script is not recognizing the select tag value?

I am struggling with an ajax script that is supposed to send data from a contact form to a PHP script. The main issue I'm facing is that I can't seem to retrieve the value from the "select" tag. My knowledge of JavaScript/ajax is limited, so plea ...

Retrieve all tag elements within another tag in a recursive manner

In my HTML document, there is a <div id = "main"> element. This div can contain multiple levels of nodes, with varying structures as the document content is created by the user. I am looking to implement a JavaScript function that will retrieve all n ...

Tips for retrieving the text value on keyboard enter press without triggering form submission

I am currently working on a feature where hitting the Enter key in a textbox should not automatically submit the form. The textbox is located within a form: @Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm", placehold ...

Is there a way to transform my button into a pop-up field displaying the same information instead of leading to a separate page?

Recently, I incorporated a highscore page with code that manages and updates the score, along with adding the username to a separate page. My goal is to have the HighScore button trigger a pop-up window when clicked, instead of navigating to another page. ...

Modify the CSS of one div when hovering over a separate div

I've been working on a simple JavaScript drop-down menu, and it's been functioning correctly except for one issue. When I move the mouse out of the div that shows the drop-down menu, it loses its background color. I want the link to remain active ...

Organizing content by title or link using jQuery

I am attempting to organize a list based on the title of a link so that it is displayed in an A-Z format. Unfortunately, I am unable to modify the HTML structure easily for better styling as I am restricted to using tr>tr>tr>. I am struggling to f ...

Setting a default value for the longText field in Laravel

I have come across an issue in Laravel where I am unable to assign a default value to longText or text fields. Specifically, I am dealing with a field called "body" that will likely contain some text or HTML. How can I set a default value for this field ...

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

How can elements with class prefix names be retrieved in IE Browser Helper Object using c#?

I've been developing an IE Plugin using BHO and I need to access an element based on its class prefix in C#. In JavaScript and jQuery, I was able to accomplish this with the following code: var myClass = $('[class^="ii gt"]'); and var myC ...

the comment in vuejs is not being identified as a comment properly

I came across an issue with comments not being recognized in my vue js code. I attempted to comment out 4 @click events in radios while testing something, but it resulted in an error for each of them. The error message I received was: https://google.com/#q ...

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

"Exploring Vue.js 2: the best way to retrieve data within a method

Currently, my setup involves single file components being triggered from vue-router. Within this setup, I have a components/Header.vue component that utilizes a child component called modals/HelpModal.vue, which in turn has another child component named co ...

Styling an active link in Next.js using Styled Components

Looking for a way to customize the active link style using styled components. I have a navigation bar where the currently active link should have a specific style applied. Any suggestions are appreciated! import React from 'react' import Link f ...