We Keep Coding

In vite + vue3 + TS project, AWS Amplify Failed to resolve components

I am having hard time to make AWS Amplify work with Vite.js
// First I was getting this error:
Uncaught ReferenceError: global is not defined
So, I added this script in index.html's head section
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
Now, I am getting this warning/error
[Vue warn]: Failed to resolve component: amplify-sign-out
[Vue warn]: Failed to resolve component: amplify-authenticator
You can see complete logs here:

I was able to fix the resolve component errors by creating a vue.config.js file in the app root directory and adding the following:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => tag.startsWith('amplify-')
};
return options;
});
}
};

According to AWS Amplify doc, you need to add app.config.isCustomElement = tag => tag.startsWith('amplify-'); to your main.ts file.
Since you're using vite, you can also do so by following the vite example. The vite.config.ts file should be like
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith("amplify-"),
},
},
}),
],
});

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

Undefined $auth in Vue using #websanova/vue-auth

I am trying to create SPA using Vue.js and Laravel as backend. I am using tymon/jwt-auth for JWT Authentication at the backend.
I cannot find $auth in my Login.vue.
I included #websanova/vue-auth in my app.js like this
...
import {createAuth} from '#websanova/vue-auth/dist/v3/vue-auth';
import driverAuthBearer from '#websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpAxios from '#websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '#websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';
...
var auth = createAuth({
plugins: {
http: axios,
router: router
},
drivers: {
http: driverHttpAxios,
auth: driverAuthBearer,
router: driverRouterVueRouter,
},
options: {
rolesKey: 'type',
notFoundRedirect: {name: 'user-account'},
}
});
Vue.use(auth);
But this gives me Uncaught TypeError: vue.reactive is not a function
I followed latest implementation as instructed at #websanova/vue-auth site
I also tried some old tutorials this and this using v2 of the package, but in that case this.$auth is undefined in Login.vue
Here's my complete app.js and Login.vue

.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,
})

Angular 5 External JSON config returning undefined

In my assets i've got a config.json file with an apiUrl
{
"apiUrl":"https://api.example.com"
}
I've got multiple environments, but one of them needs to be able to be altered after the build.
import * as config from '../assets/config.json';
export const environment = {
production: true,
appTheme: "blue-theme",
apiUrl: config.apiUrl
appName: "App",
};
in my typings.d.ts i've got
declare module "*.json" {
const value: any;
export default value;
}
When i do console.log(config) I get:
{
apiUrl:"https://api.example.com"
}
But when i do console.log(config.apiUrl) I get:
undefined
Can someone tel me what i'm doing wrong?

How to retrieve Json data
using by node
const config: any = require('../assets/config.json');
export const environment = {
production: true,
appTheme: "blue-theme",
apiUrl: config.apiUrl
appName: "App",
};
Using by http
How to extract JSON data from http.get in Angular 2 properly?
How to fetch JSON file in Angular 2