I want to display some of my pages (Vue components) on a modal, exactly the same identical components or routes that I've been using in my project, but the only difference is this time they won't be on the whole page but on a modal. I though I could use iframe but when I try to put the component name to :src attribute of iframe, Vue gives me <compName> is defined but not used error. Is there a way to put a component inside an iframe? I tried to use 3rd party npm packages like vue-friendly-iframe but couldn't get what I want. Any help would be appreciated. Thanks in advance!
Related
I have a Nuxt page and i want to change route path without re-rendering or refreshing page with a method on a button.
if i do this.$router.push() or replace(), page will refresh and if i do window.history.pushState() or replaceState() that works fine but after that if i add a query with this.$router.push({ query: a = b }) on my page, page will refresh because changing route with window.history will not change $route and when i use this.$router.push, Vue Router thinks its a different page.
I've done a lot of search on internet and did not find anything, so please don't label this question as duplicate.
What you're actually looking for is a Default Layout and some nested routes. Here is an example on how to achieve this in Nuxt with just a few steps: https://nuxtjs.org/examples/routing-nested-pages
Finally i solved this problem with using parent page and nuxt childs, i changed tabs to nav and rendered base components on parent page and other things on child pages and now it works fine. Tnx to #kissu and #Braks.
I'm trying to create a form that I want to use modularly by linking to it from multiple page templates. Using just the straight vue-cli I would simply create a route to the file that has the form defined that I store in the "components" directory and then wrap a button linking to the form in a <router-link to="componentFormName"><btn></btn></router-link>. I'm having some difficulty determining how to do the equivalent in Nuxt. Any insights would be greatly appreciated. It seems the <NuxtLink></NuxtLink> only works with Vue files in the "Pages" directory.
You probably want to use dynamic components here: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
With something like this
<component :is="currentTabComponent"></component>
With currentTabComponent being one of the component to mount. You can mount a component depending of the current route with a relation between the URL and the component name too.
Also, Vue does not have any knowledge of "route", and everything is a component. Nothing really changes with a page because it is also a component at the end of the day. Or you could write one inside of it.
Maybe an example of your use-case would be helpful here.
I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.
The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.
I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.
The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.
Any thoughts on how to implement this in Vue.js?
You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.
I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.
I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader