We Keep Coding

I want to use my environment.ts file URL variable in my common services, how can I read that variable?

My environment file
export environment = {
local: true,
title: 'Local Environment Heading',
API URL : 'http://localhost:8090/myapp/',
staging: false,
production: false,
};
Common service file
// here I want to read this API URL

In this case, you have an error on your enviroment file.
Check the name API URL it couldn't contain space on the name.
And you forgot the const on the export. (export const enviroment )
export const environment = {
local: true,
title: 'Local Environment Heading',
baseUrl : 'http://localhost:8090/myapp/',
staging: false,
production: false,
};
After fixing that, it's very simple to use. You just have to import the enviroment file.
For example in a service.
import { Injectable } from '#angular/core';
import { environment } from 'src/environments/environment';
#Injectable({
providedIn: 'root'
})
export class AuthServiceService {
constructor() {
const a = environment.baseUrl
}
}

nuxtjs/router use runtime config client side

we are using nuxt 2.14.12 and #nuxtjs/router 1.5.0
we are trying to use runtime config to make some HTTP request client side.
here is our router.js
export async function createRouter(ssrContext, createDefaultRouter) {
[...]
try {
const res = await axios.get(`${config.public.apiBaseUrl}/myslug`)
} catch (e) { }
[...]
}
here is the config file
[...]
const apiBaseUrl = `${process.env.NUXT_ENV_MY_API_URL || 'http://my-dev-domain.com'}`
[...]
export default {
apiBaseUrl,
},
private: {
apiBaseUrl,
},
[...]
here is our nuxt.config.js
export default {
[...]
publicRuntimeConfig: config.public,
privateRuntimeConfig: config.private,
[...]
buildModules: [
['#nuxtjs/router', { keepDefaultRouter: true }],
],
[...]
router: {
linkActiveClass: 'current-menu-item'
},
[...]
}
we use nuxt build in our CI and later at runtime we use nuxt start
at runtime, despite on server side the env variable NUXT_ENV_MY_API_URL is correctly set, on the client site the variable looks hardcoded (I think webpack replace it) and we get the value present on build time (http://my-dev-domain.com)
is there a way to use the runtime config on the client side?
thank you

.env Nuxt JS doesn't resolve routes in generate option correctly

I'm trying to use Nuxt JS's 2.9.2 generate object to generate dynamic pages as static files using my .env file to pull a URL, I'm having difficuility in getting it to properly link up:
nuxt.config.js
require('dotenv').config();
import pkg from './package'
import axios from 'axios'
export default {
mode: 'universal',
env: {
blog_api: process.env.BLOG_API || "http://localhost:3000/articles/blogs.json"
},
/*
** Build directory
*/
generate: {
dir: 'dist-next',
routes: function () {
return axios.get(`${process.env.blog_api}`)
.then((res) => {
return res.data.blogs.map((blog) => {
return '/posts/view/' + blog.title
})
})
}
}
}
The above code, more specifically ${process.env.blog_api}, can't seem to resolve the routes, despite it working perfectly if I replace it with my own local domain.
.env
BLOG_API="http://my-local-domain.clone/articles/blogs.json"
EDIT:
Updated code with my config, http://my-local-domain.clone/articles/blogs.json is inside of static/articles

You should use dotenv module:
https://www.npmjs.com/package/dotenv
More Info about configuration with NUXT you have here:
https://samuelcoe.com/blog/nuxt-dotenv/
You probably want to set your env property in nuxt.config.js, for example:
module.exports = {
env: {
BLOG_API: process.env.BLOG_API_URL,
},
In your component, you can now use them :
makeAsyncCall({
to: process.env.BLOG_API,
})

Pass data from nuxt module to plugin

I am trying to pass data that I get from my module options down to a plugin. So let's say this is my module:
module.exports = function (moduleOptions) {
const options = {
...this.options.moduleName,
...moduleOptions
}
this.addPlugin({
src: resolve(__dirname, 'plugin.js'),
options
})
}
and this is my plugin
import { createStore } from 'lib';
export default async ({ store, app }) => {
const settings = {
axios: app.$axios,
models: <% options.models %>
}
settings.axios = app.$axios;
createStore(settings).install()(store)
};
and this is my config
const { resolve } = require('path')
module.exports = {
rootDir: resolve(__dirname, '..'),
buildDir: resolve(__dirname, '.nuxt'),
srcDir: __dirname,
render: {
resourceHints: false
},
modules: [
'moduleName'
],
moduleName: {
{ models: require(resolve(__dirname, '../example/models')) }
}
}
it throws
axios: app.$axios,
7 | models:
> 8 | }
where models is just empty, nothing behind it. No null, no undefined.
But if I do <% console.log(options.models) %> it will show the models that I've loaded. Btw models is just an array of classes.
These models must be configurable, so how do I pass these data from my nuxt.config.js via a module to my plugin?
Hope somebody knows :)

I've worked around this issue using an require in my plugin instead of my config.

Adonuxt adonis template using env use throws an error

Am using the nuxtjs adonuxt template as located Adonuxt temlate and
am trying to use the adonis Env use in my resources plugins but this fails
I have created a vuescoketio plugin in the resources/plugins
import Vue from 'vue'
import store from '../store'
import VueSocketIO from 'vue-socket.io'
const Env = use('Env');
Vue.use(new VueSocketIO({
debug: true,
connection: Env.get('SOCKET_URL', 'https://localhost:5389'),
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
}))
But the above always throws an error
ReferenceError: use is not defined
Which i believe is from const Env = use('Env')
How can i use the ENV as specified on the adonis documentation at https://adonisjs.com/docs/4.0/configuration-and-env

You need to use process.env.
Example (nuxt.config.js):
export default {
env: {
SOCKET_URL: process.env.SOCKET_URL || 'http://localhost:3000'
}
}
Plugin
Vue.use(new VueSocketIO({
debug: true,
connection: process.env.SOCKET_URL,
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
}))