With Vue CLI 3 we have no index.html in the src folder so alternatively you can npm install –save material-design-icons-iconfont and import it in the main.js file import ‘material-design-icons-iconfont/dist/material-design-icons.css’
Let me re-iterate few points as a pretext to what i’m going to say asyncData can set component level objects and access vuex store fetch cannot set component level objects but has access to vuex store Both asyncData & fetch will be triggered in server side during initial load After initial load, asyncData and fetch … Read more
It will work because the mounted hook gets called after the component was already mounted, in other words it won’t wait for the promises to solve before rendering. The only thing is that you will have an “empty” component until the promises solve. If what you need is the component to not be rendered until … Read more
The :active pseudo-class is not the same as adding a class to style the element. The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the mouse button is pressed down and ends when it is released. What we … Read more
Since your API requires some CORS configuration, here is a simple solution with the JSONplaceholder API of a index + details list collection. test.vue, pretty much the blog listing in your case <template> <div> <div v-if=”$fetchState.pending”>Fetching data…</div> <div v-else> <div v-for=”item in items” :key=”item.id”> <nuxt-link :to=”`/details/${item.id}`”> View item #{{ item.id }}</nuxt-link> </div> </div> </div> </template> … Read more
Don’t include .styl files, it’s deprecated basically. Remove node-sass and install sass $ npm uninstall node-sass $ npm i -D sass And modify your plugins/vuetify.js file import Vue from ‘vue’ import Vuetify from ‘vuetify’ Vue.use(Vuetify) export default new Vuetify({ theme: { … } }) And main.js new Vue({ … vuetify, // we add vuetify here … Read more
Yes, the child component cannot delete itself. The reason is because the original data for rows is held in the parent component. If the child component is allowed to delete itself, then there will be a mismatch between rows data on parent and the DOM view that got rendered. Here is a simple jsFiddle for … Read more
Solution 1: jest.spyOn(Component.methods, ‘METHOD_NAME’) You could use jest.spyOn to mock the component method before mounting: import MyComponent from ‘@/components/MyComponent.vue’ describe(‘MyComponent’, () => { it(‘click does something’, async () => { const mockMethod = jest.spyOn(MyComponent.methods, ‘doSomething’) await shallowMount(MyComponent).find(‘button’).trigger(‘click’) expect(mockMethod).toHaveBeenCalled() }) }) Solution 2: Move methods into separate file that could be mocked The official recommendation is … Read more
In main.js you can just assign Axios to $http. main.js import Axios from ‘axios’ Vue.prototype.$http = Axios; By modifying the vue prototype, any vue instance will have the ability to call $http on this. (e.g. this.$http.get(‘https://httpbin.org/get’) Note: $http is the axios object now, so any method you can call on axios object, you can call … Read more
With the latest version (2.0.5), the above doesn’t work. Rather than assigning to the global config, you pass the delimiters as an option to the Vue instance: new Vue({ el: ‘#app’, data: data, delimiters: [“<%”,”%>”] }); At least, that’s what I had to do to make it work.