link2192 link2193 link2194 link2195 link2196 link2197 link2198 link2199 link2200 link2201 link2202 link2203 link2204 link2205 link2206 link2207 link2208 link2209 link2210 link2211 link2212 link2213 link2214 link2215 link2216 link2217 link2218 link2219 link2220 link2221 link2222 link2223 link2224 link2225 link2226 link2227 link2228 link2229 link2230 link2231 link2232 link2233 link2234 link2235 link2236 link2237 link2238 link2239 link2240 link2241 link2242 link2243 link2244 link2245 link2246 link2247 link2248 link2249 link2250 link2251 link2252 link2253 link2254 link2255 link2256 link2257 link2258 link2259 link2260 link2261 link2262 link2263 link2264 link2265 link2266 link2267 link2268 link2269 link2270 link2271 link2272 link2273 link2274 link2275 link2276 link2277 link2278 link2279 link2280 link2281 link2282 link2283 link2284 link2285 link2286 link2287 link2288 link2289 link2290 link2291 link2292 link2293 link2294 link2295 link2296 link2297 link2298 link2299 link2300 link2301 link2302 link2303 link2304 link2305 link2306 link2307 link2308 link2309 link2310 link2311 link2312 link2313 link2314 link2315 link2316 link2317 link2318 link2319 link2320 link2321 link2322 link2323 link2324 link2325 link2326 link2327 link2328

[Vue.js] Property or method is not defined Subscribe to RSS

I’m trying to build a vue.js google map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. there is installed the plugin using npm , and I’ve got in working when my googleMap.vue.js component:

-->

<!– :center=”{lat: 30.08674842, lng: -97.29304982}” –>
<GmapMap
:center=”{lat: latitude, lng: longitude}”
:zoom=”15”
map-type-id=”terrain”
style=”width: 500px; height: 300px”
\>

</GmapMap>
</span>
</v-flex>
</v-container>
</div>
</template>

<script>
var latitute = 30.08674842
var longitude = -97.29304982
import {
gmapApi
} from ‘vue2-google-maps’
export default {
// name:’myMap’
latitute:latitute,
longitude:longitude,
}
<

when I run this I get:

ERROR [vue.js warn]: Property or method “longitude” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

How can I fix this?

edit:

I changed the script component to:

<script>
var latitute = 30.08674842
var longitude = -97.29304982
import {
gmapApi
} from ‘vue2-google-maps’
export default {
data() {
console.log(‘im in data’)

return {
latitute: latitute,
longitude: longitude
} // name:’myMap’
}
}
</script>

no change - I’m getting the same error

edit2:

I changed the data component as above , and you can see that it is being read in the devtolls console. still no change with restarted computer. any thoughts on what to do next?

Solution :

You need to make the properties reactive data:

export default {
data () {
return {
latitude: latitude,
longitude: longitude
}
}

The object you’re exporting is a vue.js configuration object and only properties it recognises will have any effect. While it might be convenient to think of it as being like a class definition it really isn’t. Unrecognised properties, like latitude and longitude, will just be discarded and won’t end up as members of the component instances.

If you want something be available as this.blah you need to define blah as a prop, data property, computed property or method. Within the template the this. is implicit but the same rule applies.

Update: Corrected typo latitute which had been copied from the original code.

[Vue.js] can't fetch api data and store with vuex - vue.js Subscribe to RSS

there is problem about api fetch with vuex. And there is no problem with my endpoint. I can see the json data. But when I try to fetch it i can’t store the data and displaying console error below.

Error in mounted hook: “TypeError:
_api_article_js__WEBPACK_IMPORTED_MODULE_0__.default.getArticles is not a function”

About my import and export:

App.js

window._ = require(‘lodash’);

try {
window.$ = window.jQuery = require(‘jquery’);

require(‘foundation-sites’);
} catch (e) {}

window.axios = require(‘axios’);

window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;

let token = document.head.querySelector(‘meta[name=”csrf-token”]‘);

if (token) {
window.axios.defaults.headers.common[‘X-CSRF-TOKEN’] = token.content;
} else {
console.error(‘CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import vue.js from ‘vue’;
import router from ‘./routes.js’;
import store from ‘./store.js’;

new Vue({
router,
store,
}).$mount(‘#app’)

config.js

var api_url = ‘mywebsite.com/api’;

export const ESTATE_CONFIG = {
API_URL: api_url,
}

api/article.js

import { ESTATE_CONFIG } from ‘../config.js’;

export default {
getarticles: function(){
return axios.get( ESTATE_CONFIG.API_URL + ‘/articles’ );
},
}

Store.js

import vue.js from ‘vue’;
import Vuex from ‘vuex’;

Vue.use(Vuex);

import { articles } from ‘./modules/articles.js’

export default new Vuex.Store({
modules: {
articles,
}
});

modules/articles.js

import ArticleAPI from ‘../api/article.js’;

export const articles = {
state: {
articles: [],
articlesLoadStatus: 0,

article: {},
articleLoadStatus: 0
},
getters: {
getArticlesLoadStatus( state ){
return state.articlesLoadStatus;
},
getArticles( state ){
return state.articles;
},
},
mutations: {
setArticlesLoadStatus( state, status ){
state.articlesLoadStatus = status;
},
setArticles( state, articles ){
state.articles = articles;
},
},
actions: {
loadArticles( { commit } ){
commit( ‘setArticlesLoadStatus’, 1 );

ArticleAPI.getArticles()
.then( function( response ){
commit( ‘setArticles’, response.data );
commit( ‘setArticlesLoadStatus’, 2 );
})
.catch( function(){
commit( ‘setArticles’, [] );
commit( ‘setArticlesLoadStatus’, 3 );
});
},
},
}

I need help about this. Because when not sure what when doing wrong here. And of course there is no problem with the endpoint. I can see the json data. But my vuex store is empty. And there is an error above.

Solution :

The error indicates that an exported function called getArticles does not exist in api/article.js.

Taking a look at that module, it looks like a capitalization issue. The function is not capitalized so when calling it, use:

ArticleAPI.getarticles

[Vue.js] Backtick (`) needed in class binding? Subscribe to RSS

When I bind the class attribute to Vuetify’s v-chip, there is to use backtick:

<v-chip small :class=”`${project.status}`“>
{ project.status }
</v-chip>

But if I use the code below, why does it show an error?

<v-chip small :class=”{project.status} “>
{ project.status }
</v-chip>

Solution :

This is invalid syntax in any vue.js version:

<v-chip small :class=”{project.status} “>

v-bind and : colon shorthand expect an expression as a value. `${project.status}` is valid JavaScript expression that is evaluated to stringified project.status value. {project.status} isn’t valid JavaScript expression because it contains extra { and } interpolation delimiters.

A correct vue.js 1.x syntax would be to use interpolation delimiters without v-bind:

<v-chip small class=”{project.status}”>

This syntax has been removed in vue.js 2.

It should be either:

<v-chip small :class=”`${project.status}`“>

Or:

<v-chip small :class=”project.status”>

Notice that they are interchangeable only if project.status is a string.

[Vue.js] Laravel + Vuetify error Error in render this.items.slice is not a function" & Invalid prop Expected Array, got Object Subscribe to RSS

I’m using vuetify and laravel to display some data from an array using vuetify’s data table. The data get’s displayed on the table fine, but these two errors appear? I need some help as for what I can do to avoid these errors.
Errors:

Error in render: “TypeError: this.items.slice is not a function”
Invalid prop: type check failed for prop “items”. Expected Array, got Object

I’ve tried searching for the Invalid prop error for a while now but still nothing helped. As for the error in render part, this is where I really haven’t found anything.

.vue.js Data table:

<v-data-table
:headers=”headers”
:items=”lists”
class=”elevation-1”
\>
<v-btn color=”success”>Success</v-btn>
<template v-slot:items=”lists”>
<td class=”text-xs-left”>{ lists.item.Customer }</td>
<td class=”text-xs-right”>{ lists.item.Address }</td>
<td class=”justify-center layout px-0”>
<v-icon small class=”mr-2” color=”teal”>visibility</v-icon>
<v-icon small class=”mr-2” color=”orange darken-2”>edit</v-icon>
<v-icon small color=”red darken-2”>delete</v-icon>
</td>
</template>

script:

<script>
let Add = require(‘./Add.vue’);
export default {
components: { Add },
data () {
return {
lists:{},
errors:{},
headers: [
{
text: ‘Customer’,
align: ‘left’,
value: ‘Customer’
},
{ text: ‘Address’, value: ‘Address’ },
{ text: ‘Contact No’, value: ‘CustomerContactNo’ },
],

}
},
mounted(){
axios.post(‘/getData’)
.then((response)=> this.lists = response.data)
.catch((error) => this.errors = error.response.data)
}
}
</script>

How do I avoid these errors? Any help is appreciated, Thanks.

Solution :

Both errors suggest you have a prop called items that is being passed an object instead of an array.

A candidate would be the prop called items here:

<v-data-table
:headers=”headers”
:items=”lists”
class=”elevation-1”
\>

Based on those errors we can guess that the value lists might incorrectly be an object. Digging further, if we take a look in the JS code we find this:

data () {
return {
lists: {},

So the initial value is an object, not an array. Once the remote data shows up it will be replaced with an array and everything will appear to work correctly.

Try changing lists: {}, to lists: [],.

[Vue.js] webpack scoping all SCSS under vue app selector Subscribe to RSS

when writing a vue.js app that renders inside a page on a “traditional” server-rendered site, in this container:

<div id=”account-summary-container”></div>

Things work great when developing locally. But when run within the context of the website there is alot of style collision, because both my app and the website’s styles are global. My app screws up styles on the entire site.

How can I scope all styles in my app to be local to the selector my app is rendered within?

My app uses bootstrap 4 styles which when loading with css-loader.

there is webpack.config.js entrypoints like this:

entry: {
app: [“./src/scss/styles.scss”, “./src/app.js”]
},

and styles.scss looks like:

@import ‘~bootstrap/scss/bootstrap’;
@import ‘../css/feather.min.css’;
@import ‘../css/icomoon-spinners.css’;
@import url(‘https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
@import ‘helpers/variables’;
@import ‘helpers/mixins’;
@import ‘helpers/placeholders’;

when thinking css-modules might be the answer, but I can’t figure out how to tell css-loader to make ALL styles local to #account-summary-container. I tried this in styles.scss:

:local(#account-summary-container) {
composes: “~bootstrap/scss/bootstrap”;
composes: “../css/feather.min.css”;

}

And it scoffed at my lame attempt with:

Error: composition is only allowed when selector is single :local class name not in “:local(#account-summary-container)”, “#account-summary-container” is weird

I’m wondering if when approaching it totally wrong. I’m hoping to not have to do alot of rewriting of styles.

Solution :

In order to target only components inside of the vue.js instance you have to use scoped styles. It is kind of a pain because you can’t scope the css on the “main” App.vue.js file and let all children inherit it - you have to use scoped styles on each component that need it, which may result in more requests than you’d like..

As an example (I tested this and it should work)..

<template>
<!–
VUE/COMPONENT TEMPLATE
-->
</template>

<script>
export default {
/* ***********************
VUE/COMPONENT CODE
*********************** */
};
</script>

<!–
*********************************************************
***** SCOPE CSS PER COMPONENT ****************************
***** IMPORT VIA ‘src=”./path/to/cssfile.css”‘ ***********
**********************************************************
-->
<style scoped src=”../css/style.css”>

</style>

Solution 2:

Found the answer. Pretty simple. Should had a V8 (conk).

.pony {
@import ‘sub’;
font-size: 100px;
}

[Vue.js] how can I push in this array? Subscribe to RSS

I’m trying to push another fruit in the array with push. But it doesn’t work, when I run this I’m getting the same array.
can you help me please.

HTML

<div id=”app”>
<ul>
<li v-for=”fruit in fruits”>
{fruit.name}
</li>
</ul>
</div>

JavaScript

new Vue({
el:’#app’,
data:{
fruits:[
{name:’apple’},
{name:’banana’},
{name:’orange’}
]
}
})

vue.fruits.push({name:’pear’});

Solution :

i get the answer is only do this:

var vueApp=new Vue({
el:’#app’,
data:{
fruits:[
{name:’apple’},
{name:’banana’},
{name:’orange’}
]
}
})

vueApp.$data.fruits.push({name:’pear’});

Solution 2:

You need to have a reference to the vue.js instance, then you can access the fruits data property directly on the instance:

const comp = new Vue({
el: ‘#app’,
data: {
fruits: [
{ name: ‘apple’ },
{ name: ‘banana’ },
{ name: ‘orange’ }
]
}
})

comp.fruits.push({ name: ‘pear’ })

[Vue.js] Params not being passed throug router link on Vuejs Subscribe to RSS

when trying to pass properties to a component through a router-link on Vuejs, but the component is not recieving them properly. there is a main menu and a secondary menu, which is where to pass the properties, when a main menu button is clicked:

const Sidebar = {
name:’sidebar’,
template:`
<div>
Sidemenu
<router-link v-for=”route in routes” v-key=”route” :to=”route”>{route}</router-link>
</div>`,
props: {
routes:{
type: Array,
required: true,
default: function(){return []}
}
}
}

const AppMenu = {
name:’app-menu’,
template:`
<div>
<router-link :to=”{name:’project’, params:{routes: projectMenus}”>Project</router-link>
<router-link :to=”{name:’assets’, params:{routes: assetsMenus}”>Assets</router-link>
</div>`,
data: function(){
return{
projectMenus: [‘overview’, ‘settings’],
assetsMenus: [‘landscapes’, ‘characters’]
}
}
}

const App = {
template:`
<div>
<app-menu/>
<router-view name=”sideview”/>
<router-view name=”sectionview”/>
</div>`,
components:{AppMenu}
};

const Routes= [
{path: ‘/‘, name:’home’, redirect: ‘project’},
{path:’/project’, name:’project’, components:{sideview:Sidebar}, props:{sideview:true},
{path:’/assets’, name:’assets’, components:{sideview:Sidebar}, props:{sideview:true}
]

The Sidebar component is rendering, because I can see “Sidemenu” on the page, but the console throws [vue.js warn]: Missing required prop: “routes” on Sidebar, so my submenu links are not shown. I’ve searched on the docs, and many similar issues in many forums, but I can’t find what I’m doing wrong.

Solution :

When you make props an object in the vue.js routes definitions, it will replace the components props. You are setting them as {sideview: true} which overrides all props in the Sidebar component.

At least that is my understanding from https://router.vuejs.org/guide/essentials/passing-props.html#object-mode

[Vue.js] Property or method names is not defined on the instance but referenced during render Subscribe to RSS

I’m setting up a Vue.js project and connecting it to Firebase for the real time database.

Problem: when able to save the data to the Firebase database however when not able to render it to the view.

Error Message:

[vue.js warn]: Property or method “names” is not defined on the instance
but referenced during render.

there is tried to adjust the vue.js instance “names” property by adding it the data function instead of making it a separate property in the instance, but that is not working.

<div id=”app”>

<label for=””>Name</label>
<input type=”text” name=”” id=”” v-model=”name”>
<button @click=”submitName()”>Submit</button>

<div>
<ul>
<li v-for=”personName of names”
v-bind:key=”personName[‘.key’]“>
{personName.name}
</li>
</ul>
</div>

</div>

<script>

import {namesRef} from ‘./firebase’
export default {
name: ‘app’,
data () {
return {
name: “levi”,
}
},
firebase: {
names: namesRef
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}

}
}
</script>

<style>

Expected Result: Data saved to Firebase is rendered on the view

Actual result:

[vue.js warn]: Property or method “names” is not defined on the instance
but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.

Solution :

Try this.
You need to return the object in data

<script>

import {namesRef} from ‘./firebase’
export default {
name: ‘app’,
data () {
return {
name: “levi”,
firebase: {
names: namesRef
},
}
},

methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}

}
}
</script>

<style>

Solution 2:

Essentially, you have an incorrect attribute in the vue.js instance.. You need to move firebase into data..

([CodePen])

I was unable to get this working in a Stack Snippet..

~THE FIX~

VUE/JS

firebase.initializeApp({
databaseURL: “https://UR-DATABASE.firebaseio.com",
projectId: “UR-DATABASE”
});

const database = firebase.database().ref(“/users”);

const vm = new Vue({
el: “#app”,
data: {
firebase: {
names: []
},
name: “SomeName”
},
methods: {
getFirebaseUsers() {
this.firebase.names = [];
database.once(“value”, users => {
users.forEach(user => {
this.firebase.names.push({
name: user.child(“name”).val(),
id: user.child(“id”).val()
});
});
});
},
handleNameAdd() {
let id = this.generateId();
database.push({
name: this.name,
id: id
});
this.name = “”;
this.getFirebaseUsers();
},
generateId() {
let dt = new Date().getTime();
return “xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx”.replace(/[xy]/g, c => {
let r = ((dt + Math.random() * 16) % 16) | 0;
dt = Math.floor(dt / 16);
return (c == “x” ? r : (r & 0x3) | 0x8).toString(16);
});
}
},
mounted() {
this.getFirebaseUsers();
}
});

HTML

<script src=”https://www.gstatic.com/firebasejs/6.1.1/firebase.js"> .
</script>

<div id=”app”>

<label for=””>Name</label>
<input type=”text” name=”” id=”” v-model=”name”>
<button @click=”handleNameAdd”>Submit</button>

<div>
<ul>
<li v-for=”(person, index) in firebase.names”
v-bind:key=”person.id”>
{person.name} | {person.id}
</li>
</ul>
</div>

</div>

OLD ANSWER:
This is what it should look like inside of data:


data() {
firebase: {
names: [],
}
}

Therefore, the data in the v-for would be referenced via firebase.names like:


<li v-for=”(personName, index) in firebase.names”
:key=”index”> // <<– INDEX IS NOT THE BEST WAY TO STORE KEYS BUT ITS BETTER THAN NOTHING
//:key=”personName.id // <<– YOU COULD ALSO DO SOMETHING LIKE THAT, IF YOU HAVE A UNIQUE ID PER PERSON
{personName.name}
</li>

OPTIMAL FIX:

You could use a computed property if you wanted to automatically save/retrieve data from firebase each time a user adds a new name…as outlined in the CodePen and Code Snippet..

THE ISSUE:

<script>
import {namesRef} from ‘./firebase’
export default {
name: ‘app’,
data () {
return {
name: “levi”,
}
},
firebase: { // <<— THIS IS INVALID, AND WHY IT’S NOT RENDERING
names: namesRef // CHECK the CONSOLE FOR ERRORS
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}

}
}
</script>

Solution 3:

Use a computed property for names. Computed is more appropriate than data in this case, mainly because the component does not own the data. If it eventually resided in a vuex store, for instance, it would then react to external changes.

<script>

import {namesRef} from ‘./firebase’
export default {
name: ‘app’,
data () {
return {
name: “levi”,
}
},
computed: {
names() {
return namesRef
}
}
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}

}
}
</script>

Solution 4:

Try this

<script>

import {namesRef} from ‘./firebase’
export default {
name: ‘app’,
data () {
return {
name: “levi”,
}
},
cumputed: {
names: namesRef
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}

}
}
</script>

[Vue.js] How to create a veutify superset to extend basic functionality Subscribe to RSS

I’m trying to create a plugin based component library to provide consistency across multiple product lines using veutify. However, install the library and add the components I get several errors regarding dark theme.

Both the component library and the target product line have veutfy installed via the vue.js cli.

<template>
<div class=”module-wrap”>
<v-card v-bind=”$attrs” v-on=”$listeners” :class=”`dashboard-module units`“>
<v-toolbar flat dense :color=”color”>
<v-toolbar-title>{title}</v-toolbar-title>
<v-spacer></v-spacer>
<v-menu v-bind=”$attrs” v-on=”$listeners” class=”menu” offset-y>
<template v-slot:activator=”{ on }”>
<v-btn class=”menu-opener” icon v-on=”on”>
<font-awesome-icon icon=”ellipsis-h”></font-awesome-icon>
</v-btn>
</template>
<v-list>
<v-list-tile class=”tooltip” @click=”dialog = true”>
<v-list-tile-avatar>
<font-awesome-icon icon=”info”/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Information</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile class=”favorite” @click=”$emit(‘favorite’)”>
<v-list-tile-avatar>
<font-awesome-icon icon=”star”/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Save To Favorites</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile class=”export” v-if=”!disableExport” @click=”$emit(‘export’)”>
<v-list-tile-avatar>
<font-awesome-icon icon=”file-export”/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Export</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
<div :class=”`content`“>
<slot></slot>
</div>
<v-card-text>
<slot name=”card-text”></slot>
</v-card-text>
<v-dialog v-model=”dialog” width=”500”>
<v-card>
<v-card-title>
<div class=”headline”>{title}</div>
</v-card-title>
<v-card-text>
<slot name=”tooltip”></slot>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click=”dialog = false” flat color=”primary”>Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-card>
</div>
</template>

<script lang=”ts”>

export default {
// props:[‘color’, ‘module’, ‘title’],
props: {
color:String,
title:String,
disableExport:Boolean
},

data() {
return {
dialog:false
}
}
}
</script>

<style scoped>

.dashboard-module {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.content {
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
}

</style>

^ Component from library

webpack-internal:///./node_modules/dashboard-components/node_modules/vue/dist/vue.runtime.esm.js:620 [vue.js warn]: Error in render: “TypeError: Cannot read property ‘dark’ of undefined”

found in

-–> <VMenu>
<TDashboardModule>
<App> at src/App.vue
<Root>

TypeError: Cannot read property ‘dark’ of undefined

[vue.js warn]: Error in getter for watcher “isDark”: “TypeError: Cannot read property ‘dark’ of undefined”

found in

-–> <ThemeProvider>
<VDialog>
<TDashboardModule>
<App> at src/App.vue
<Root>

^ Errors thrown

Solution :

Did you setup the theme color? And where? In case negative, in accordance to the documentation:

Vuetify supports both light and dark variants of the Material Design
spec. This designation starts at the root application component, v-app
and is supported by majority of components. By default, your
application will use the light theme, but this can be easily
overwritten by adding the dark prop.

<v-app dark>

If you don’t want to setup everything in one color, you can pass for example a prop named dark to the components in order to make them use the dark theme:

<v-menu dark>

Documentation about menu component

[Vue.js] Unexpected URL generated while using window.location.hostname Subscribe to RSS

when trying to append URL, but it the generated URL is not as expected. Below is the code that I’ve tested and its outcome.

Since I’m using a local server to test my system, the desired request URL is http://127.0.0.1:8000/api/posts. I will be deploying this system to a remote server in the near future so I cannot use the request URL as it is now. Base on the code below, what when trying to do is to get the current hostname and append it with the route URL but it produces weird URL. How to solve this?

Component

created() {
var test = window.location.hostname + ‘/api/posts’;
this.axios.get(test).then(response => {
this.posts = response.data.data;
});

Route Api (api.php)

Route::get(‘/posts’, ‘PostController@index’);

Solution :

Just use an absolute URL in the axios requests if you don’t want to have to configure a base URL:

this.$axios.get(‘/apiposts’)

Where the prefixed / is the important part.

Solution 2:

You probably do not need to set baseURL. Have you tried to define baseURL? For example:

axios.get(`${proccess.env.HOST}:${PORT}/api/categories`)

Add this code in your: /src/main.js

const baseURL = ‘http://localhost:8080';
if (typeof baseURL !== ‘undefined’) {
Vue.axios.defaults.baseURL = baseURL;
}

See the solution here Set baseURL from .env in VueAxios

I think in the app baseURL is set to http://127.0.0.1:8000 (default) and you append the host to this url in this line var test = window.location.hostname + ‘/api/posts’;. Try it without this.