Newbe Dev Stack

Answer : Instead of this.$axios.get('items') use this.$axios({ url: 'items', baseURL: 'http://new-url.com' }) If you don't pass method: 'XXX' then by default, it will send via get method. Request Config: https://github.com/axios/axios#request-config Putting my two cents here. I wanted to do the same without hardcoding the URL for my specific request. So i came up with this solution. To append 'api' to my baseURL, I have my default baseURL set as, axios.defaults.baseURL = '/api/'; Then in my specific request, after explicitly setting the method and url, i set the baseURL to '/' axios({ method:'post', url:'logout', baseURL: '/', }) .then(response => { window.location.reload(); }) .catch(error => { console.log(error); }); Create .env.development , .env.production files if not exists and add there your API endpoint, for example: VUE_APP_...

Answer : in my case i had to wrap all my components in v-app <div id="id"> <v-app> // youre code here </v-app> </div> if you dont do this youre app use default theme. reference from vuetify docs: "In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE." the Color will not Switch The colour of what? You don...

Answer : To have $color globally available, you can use a Mixin , more specifically a Global Mixin . If you would only want it to be read-only, it is simplest solution (less code). See snippet: Vue.mixin({ created: function () { this.$color = 'green'; } }) new Vue({ el: '#app1', data: { message: 'Hello Vue.js!' }, mounted() { console.log('$color #app1:', this.$color); } }) new Vue({ el: '#app2', data: { message: 'Hello Vue.js!' }, mounted() { console.log('$color #app2:', this.$color); } }) <script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script> <div id="app1"> <p>app1: {{ message }}</p> </div> <div id="app2"> <p>app2: {{ message }}</p> </div> Making $color reactive To mave Vue react everywhere to changes to $color , you could use a Vuex store (see other answe...

Answer : It doesn't look like you've posted all the code, but hopefully I understand the goal. Try moving the transition to the max-height property: .fadeHeight-enter-active, .fadeHeight-leave-active { transition: all 0.2s; max-height: 230px; } .fadeHeight-enter, .fadeHeight-leave-to { opacity: 0; max-height: 0px; } as long as you set a max height to be larger than the tallest element , it should accomplish what you need. Note that you may also want to use overflow:hidden as well. If you have dramatic variation of the actual height of the elements, this solution may not be the best, as it will make the animation duration/delay appear very different. https://jsfiddle.net/7ap15qq0/4/

Answer : Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one. i had followed that process and i get the color applied to b-nav-item-dropdown which is #ffffff80 applied to this selector .navbar-dark .navbar-nav .nav-link , So let's change it to black as follow : <template> ... </template> <style> .navbar-dark .navbar-nav .nav-link{ color:black!important } </style> Pass your additional class in the toggle-class prop. For example: <b-nav-item-dropdown toggle-class="text-dark" text="Electronics"> See https://bootstrap-vue.js.org/docs/components/nav#dropdown-support for more props this component supports.

Answer : Most probably you want to use a method <span>{{ fullName('Hi') }}</span> methods: { fullName(salut) { return `${salut} ${this.firstName} ${this.lastName}` } } Longer explanation Technically you can use a computed property with a parameter like this: computed: { fullName() { return salut => `${salut} ${this.firstName} ${this.lastName}` } } (Thanks Unirgy for the base code for this.) The difference between a computed property and a method is that computed properties are cached and change only when their dependencies change. A method will evaluate every time it's called . If you need parameters, there are usually no benefits of using a computed property function over a method in such a case. Though it allows you to have a parametrized getter function bound to the Vue instance, you lose caching so not really any gain there, in fact, you may break reactivity (AFAIU). You can read more about this in Vue documentation htt...