To make code more simple/clean for me and my designers, I'd like to be able to do something like below. Is it possible - using a custom directive or render function to implement this with a simple attribute?
This would really help separating animation from structure and functionality, which I think could be helpful in many cases. I figure render functions can easily wrap an element with other HTML elements, but can they wrap elements (or components) with custom Vue transitions?
This:
<template>
<my-component custom-transition></mycomponent>
</template>
Becomes this:
<template>
<custom-transition>
<my-component></mycomponent>
</custom-transition>
</template>
Or maybe bring it up on Github?
Thanks!
A Vue forum member provided a great solution for me in this thread using dynamic components. Happy!
Related
Im facing a problem for my VUE app, Im using the vue Router to navigate to my component
In my Header component I use router-link to navigate to a Home component
The problem is :
In my Header component I would like a checkBox (a boolean variable) that change the content of my Home component (rendered in the router-view) like a v-if that would check the boolean variable in the Header
Here is my App.vue template I was trying to solve the problem through emits but Im Kinda stuck for passing data inside a component (inside the router-view)
<template>
<div class="content">
<HeaderComponent #eventCheckBox="handleCheckBox" />
<router-view />
<FooterComponent />
</div>
Do you guys have already faced this issue, is there a way to do it the classic way or should I try plugins like Portal or Teleport ?
Portal and Teleport are the same, just a different name (teleport in Vue3, being the official name).
As of the rest of the question, this explains it very well: https://stackoverflow.com/a/49702934/8816585
Mainly, you need to see if you need to use a store like Pinia (recommended one) and Vuex. Most of the time, you could use a parent/child relationship. Here is another article explaining when you would need something like that: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/#alternatives-to-storing-data-in-vuex
In Vue3, you could even not use a store and rely solely on the singleton pattern + composables (again, a lot of articles are available for that one).
TLDR: use your Vue devtools and inspect the state flowing.
If you need more, reach for more powerful tools.
this is a question about best practices, in short: what is the best way to implement this function
I used the vue cli to create a project to train on. And so the normal template it provided me with was a side header thing with the content on the side, and so I made some modifications:
the issue is visualized down if the text explaination wasn't clear
and so what I had in mind was to add a slot in the header "the left side" to add the adding button, and the button wouldn't need to be visible in the other tabs, like the help tab.
App.vue
<template lang="pug">
TheHeader
routerView( v-slot="{ Component }" )
transition( name='slide-fade' mode='out-in' )
component( :is="Component" )
</template>
but here comes the issue, as you can see the tabs are in router views and the router view is beside the header component. the solution I had in mind was to:
add a list of strings in the App.vue with ["help", "course", ...] in the script section
the strings are linked to what router is being used (not very sure how to do this but I guess I could do a v-model to the v-slot being used)
pass the string to the header component
include a v-if statement with every tab's little widget
but I felt like this alone will jank the code a lot and thought if maybe there was an easier way to pass an entire component from one child to another it would be great. if there isn't I'd just like to know if it's the best practice I could do and proceed with this solution
issue visualization:
wanted behavior mock-up:
the solution was to use the Built In <Teleport> Vue component. this way I just type <Teleport to="..."> and it will go where I want
I need to have a component, where I get the type of another component that this component should create. (it could be one of n different elements) Doing this in the component's render function is not a problem, but since I am new to Vue and I am trying to do things the Vue way, not the way I would do it in React.
I have not been able to find any solution with just using a Vue template. Is there one?
This is how I would like to be able to use the component:
<factory elm="first-component"></factory>
The factory should then internally in some way result in this:
<first-component></first-component>
(it should also be able to add attributes to the component, but that I know how to do, so a suggested solution does not need to care about attributes)
There is <component :is="myCoolComponent"></component> that will basically generate <my-cool-component></my-cool-component>.
Is it what you're looking for?
From the documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
You could also totally create a Factory.vue component and put that kind of logic inside of it (<component :is="" ...>).
I am using single file components and I am wondering if something like this is possible:
<my-component param1='comp1'></my-component>
<my-component param1='comp2'></my-component>
<my-component param1='comp3'></my-component>
So when later methods for component my-component are called, each component can read param1 attribute. Is this possible with vuejs?
Just to clarify things little bit more:
I am writing component for table pagination - everything is cool, except for the case when there are several tables on the same page. In that case I would also need several pagination components. So I need a method which will connect table and pagination component through table id.
Something like this:
<table id="tbl1"></table>
<pagination-comp tblid="tbl1"></pagination-comp>
<table id="tbl2"></table>
<pagination-comp tblid="tbl2"></pagination-comp>
This exactly what props did. Please follow this guide.
I wonder how can I achieve a simple tooltip component in Vue?
What I try to do is: Hover on element, a component tag will be appended.
I do not know how to compile/render that component into DOM after I append it using jquery. In Angular, this can be achieved by using $compile
This way to implement tooltip may not be a good practice, but I just wonder how to achieve.
Thanks,