We Keep Coding

Adonis 5 + Vue "E_ROUTE_NOT_FOUND"

I'm doing an Adonis v5 app with Vue 2 as frontend.
My problem is, once I've build Vue frontend into public adonis folder. If I access to a speficic route writing it into the top browser searcher, I get the E_ROUTE_NOT_FOUND from Adonis.
I do think that adonis is trying to search the route into the router of the server and not into the Vue router. Althought adonis it's configured to use static files and the first frontend page works:
Vue router.js:
Vue.use(VueRouter);
const routes = [
{
path: "/",
redirect: { name: "acceso" },
},
{
path: "/acceso",
name: "acceso",
component: SignupView,
meta: { guestAllow: true },
}];
const router = new VueRouter({
mode: "history",
routes,
});
Adonis routes.ts (It shouldn't affect as the have a prefix:
Route.group(() => {
Route.group(() => {
Route.post("register", "AuthController.register");
Route.post("login", "AuthController.login");
}).prefix("auth");
Route.group(() => {
Route.get("logs", "LogsController.index");
}).middleware("auth:api");
}).prefix("/api");
Adonis static.ts:
import { AssetsConfig } from '#ioc:Adonis/Core/Static'
const staticConfig: AssetsConfig = {
enabled: true,
dotFiles: 'ignore',
etag: true,
lastModified: true,
maxAge: 0,
immutable: false,
}
If I write localhost:3333 on the browser I redirects to /access (Correct)
But if I refresh the page, or browse manually the same route, the error shows
Any idea of what could it be?
Thank you for your time.

After looking some other projects on internet, I've seen that if you use mode: "history" on vue-router it pops the error.
So I've tried to comment this line and now I can refresh the page without E_ROUTE_NOT_FOUND error.
Frontend Vue router.js:
const router = new Router({
//mode: "history",
routes,
});

vue.js: cannot acces public folder after incorporation of vue-router

I have a vue.js project where I play audio files that are stored in my public folder:
Previously, I was able to access and play these files as such:
path = 'recordings/Behar/weekday/1.mp3'
this.audio = new Audio(path);
this.audio.play()
But after adding the vue-router in main.js:
const routes = [
{ path: '/', component: Controller },
{ path: '/date/:date', component: Controller },
{ path: '/date/:date/aliyah/:aliyah', component: Controller },
{ path: '/date/:date/aliyah/:aliyah/verse/:verse', component: Controller },
]
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
})
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
When I try to play these recordings I see this message:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
I believe that somehow adding the vue-router has screwed up with my access to the public folder.
Why am I no longer able to access the public folder and how (and if at all) has vue-router changed that?

With the routing, I found that to access the publicPath I need to append a '/' in front of my path:
path = '/recordings/Behar/weekday/1.mp3'

Nuxt image keeps breaking on page change

I have image displayed on my Nuxt page but anytime I navigate away from it back the image breaks and I do not know why.
I have this in my code
<img :src="baseUrl + 'storage/'+ front.featured_image" alt="post-title" />
and my script
data: () => ({
frontpage: [],
baseUrl: process.env.BASE_URL
}),
async asyncData({ $axios }) {
const response = await $axios.get('/api/frontpage')
return { frontpage: response.data.posts }
},
I have a .env file and I have the following inside it BASE_URL=http://localhost/ and I also have the following inside nuxt.config.js
env:{
baseUrl: process.env.BASE_URL || 'http://localhost/'
}
My API is built using laravel and it is loading from http://localhost/ but Nuxt keeps going back to localhost:3000 on page change.

You can check my previous answer here: https://stackoverflow.com/a/67705541/8816585
This may help
export default {
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
},
}
Otherwise, this configuration of Axios may also help!

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-"),
},
},
}),
],
});

this.$route undefined in VueJS (without using arrows)

For some reason, this.$route is undefined for me. I have just started building my Vue application:
window.Vue = require('vue');
new Vue({
el : '#break-container',
data : {
break : null
},
methods : {
fetchBreak : function(){
console.log(this.$route); //undefined
},
},
mounted : function(){
this.fetchBreak();
},
});
I see a bunch of questions on SO about this, but every time the problem seems to be that they are using arrow notation.
In my case, when I do console.log(this) there is no $route key in the printed object at all. The keys ($attrs, $children, ... , $vnode, break).
What can I do to resolve this?

As I understand it, this.$route is only available on Vue instances if you register your router when you create your Vue app. Your code appears to be missing the router definition and subsequent initialisation on the Vue instance
new Vue({
el : '#break-container',
// Register your router
router: router,
data : {
break : null
},
methods : {
fetchBreak : function(){
console.log(this.$route); //undefined
},
},
mounted : function(){
this.fetchBreak();
},
});
See the sample code here for a full-fledged example. From the page above:
By injecting the router, we get access to it as this.$router as well as the current route as this.$route inside of any component
EDIT:
Pasting some example code from the link above for clarity. Note the steps 0-4 in the comments. Odds are, one of those steps are missing in your code :)
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')