I recommend this solution by antfu, which is IMO by far the best approach to work with any kind of icons: https://github.com/antfu/unplugin-icons Check the more in-depth article explaining why and how the whole thing works. Here’s a quick way on how to use it with Nuxt3, first off the requirements: be sure to use Node … Read more
It can work by using props’s Function mode and params Vue 2 demo: https://jsfiddle.net/hacg6ody/ when adding routes, use props’s Function mode so that it has a default property user and it will add route.params as props. { path: ‘/create’, name: ‘create’, component: CreateComponent, props: (route) => ({ user: userData, …route.params }) } params passed in … Read more
You can read on the Vue loader’s docs: A child component’s root node will be affected by both the parent’s scoped CSS and the child’s scoped CSS. This is apparently what it is meant to do, even though it might seem a bit confusing. If you want to avoid that, you should use css modules: … Read more
Include an external JavaScript file Try including your (external) JavaScript into the mounted hook of your Vue component. <script> export default { mounted() { const plugin = document.createElement(“script”); plugin.setAttribute( “src”, “//api.myplugincom/widget/mykey.js” ); plugin.async = true; document.head.appendChild(plugin); } }; </script> Reference: How to include a tag on a Vue component Import a local JavaScript file In … Read more
The way you are doing it is fine. But there is another vue specific way via a ref attribute. mounted () { this.matchHeight() }, matchHeight () { let height = this.$refs.infoBox.clientHeight; } <div class=”columns”> <div class=”left-column” id=”context”> <p>Some text</p> </div> <div class=”right-column” id=”info-box” ref=”infoBox”></> <img /> <ul> some list </ul> </div> </div> In this case, … Read more
localStorage is not reactive but I needed to “watch” it because my app uses localstorage and didn’t want to re-write everything so here’s what I did using CustomEvent. I would dispatch a CustomEvent whenever you add something to storage localStorage.setItem(‘foo-key’, ‘data to store’) window.dispatchEvent(new CustomEvent(‘foo-key-localstorage-changed’, { detail: { storage: localStorage.getItem(‘foo-key’) } })); Then where ever … Read more
You’re getting empty PDF ’cause no data is passed to the server. You can try passing data using data object like this axios .post(`order-results/${id}/export-pdf`, { data: { firstName: ‘Fred’ }, responseType: ‘arraybuffer’ }) .then(response => { console.log(response) let blob = new Blob([response.data], { type: ‘application/pdf’ }), url = window.URL.createObjectURL(blob) window.open(url) // Mostly the same, I … Read more
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’
Summing up: <!– Component A –> <template> <div class=”A”> <B> <component :is=”child_component”></component> </B> </div> </template> <script> import B from ‘./B.vue’; import Equipment from ‘./Equipment.vue’; export default { name: ‘A’, components: { B, Equipment }, data() { return { child_component: ‘equipment’ }; } }; </script> <!– Component B –> <template> <div class=”B”> <h1>Some content</h1> <slot></slot> <!– … Read more
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