I'm using a component that comes from my design-system in vue 2,
I bundle it in vue3 with rollup to make it works with my front-end app.
For no apparent reason the class is not applied thus the style neither.
See below the component with the class
<div v-else-if="!isFolder">
<BIMDataCheckbox
:disabled="disabled"
v-if="multiSelect"
:modelValue="selected"
class="file-card__content__header__btn-menu__checkbox"
/>
<BIMDataRadio
:disabled="disabled"
v-else
big
:modelValue="selected"
name="BIMDataFileCardRadio"
/>
</div>
In a other front-end app in vue 2 where I also import the design-system the component works like a charm
any suggestion ?
Related
I am writing a single page app with VueJS. I have a lot of html elements sharing the same style across differents files. To simplify my job and clear the template section I've created .vue files to encapsulate commom html block.
For example I have files like AccentBox.vue:
<template>
<div class="bg-accent rounded-lg p-4 flex cursor-pointer">
<div class="m-auto flex flex-row">
<slot></slot>
</div>
</div>
</template>
The problem is that it increase the bundle size a lot and in the browser side it has a big performance overhead.
Example of the Home.vue:
<Box class="mt-5">
<GrowingAnimation>
<Header1>Titre:</Header1>
<Text class="mt-2">{{todo.title}}</Text>
<ClickScale>
<AccentBox class="mt-5 flex flex-row gap-4">
<TrashIcon class="h-10" />
</AccentBox>
</ClickScale>
</Animation>
</Box>
I want to know if there is a way to "precompile / transform" those component so that in the browser vuejs does not have to render the AccentBox.vue component and avoid having huge trees of nested vuejs components.
I already use the vuejs build command but browser side AccentBox.vue still is a component and take time to be processed by vue.
Transforming this:
<Header1>Titre:</Header1>
into
<h1 class="text-3xl font-bold">Titre:</h1>
Is there any way to do it? Thanks in advance.
Because your AccentBox.vue file represents a full-blown component, it does contain more overhead than simply writing out some divs. However, in Vue 3, this overhead is rather minimal, and there isn't a way to precompile something like a macro.
Vue allows us to write stateless components that simply render HTML, using something called a render function. We can rewrite your AccentBox component like this:
import { h } from 'vue'
const AccentBox = (props, context) => {
return h(
'div',
{ class: 'bg-accent rounded-lg p-4 flex cursor-pointer' },
h(
'div',
{ class: 'm-auto flex flex-row' },
context.slots
)
)
}
export default AccentBox
We can then import it in exactly the same way as a standard Vue file:
import AccentBox from 'AccentBox.js'
When using Vue Router, I found that I could use <router-link> as well as RouterLink to achieve the same result, i.e. navigate between different routes.
Similarly, there's <router-view> as well as RouterView component.
Following two code examples give me the same result:
With <router-link> and <router-view>:
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<hr />
<router-view></router-view>
</template>
With <RouterLink> and <RouterView>:
<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>
<template>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<hr />
<RouterView />
</template>
Question
What is the difference between <router-link> and RouterLink (and between <router-view> and RouterView?)
I couldn't find anything on Vue Router docs. Searching for RouterView or RouterLink doesn't show any results related to them. Docs only mention <router-link> and <router-view>.
P.S. Scaffolding a new Vue project with npm init vue#latest command uses RouterLink and RouterView components instead of router-link and router-view.
It's the same components, just with different cases, in vue it's recommended to use the PascalCase syntax as mentioned here :
In SFCs, it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.
They are the same thing. Any component can be used either by writing its name as PascalCase or kebab-case.
One is the component name and one is the vue class. I don't think there is a difference. If you would create your own component e.g. MyComponent.vue, you can also use <MyComponent> or <my-component>
While designing client-rendering SPA, <teleport to="body"> of Vue3 works well.
I can teleport dialog component to <body>.
<--! dialog component example-->
<template>
<teleport to="body">
<div class="dialog">
<slot></slot>
</div>
</teleport>
</template>
However, it's failed when I try to use the same way in Nuxt static mode.
Does Nuxt support "teleport" method?
Is there any other workaround dealing with teleport in Nuxt static application?
Portals/Teleport arrived with Vue 3. This is not yet supported in Nuxt, as it is still running on v2. If necessary, you can likely find alternative third party packages for this in the meantime.
I may misunderstand what you're looking for but one solution is using <ClientOnly>. Most of the time we only need to render Modal in client-side (without SSR) anyway.
<template>
<div class="modal_container">
<ClientOnly>
<Teleport to="body">
<div class="modal">
Hello World
</div>
</Teleport>
</ClientOnly>
</div>
</template>
I have a global sidebar component TheSidebar.vue:
<template>
<aside>
<slot></slot>
</aside>
</template>
In Blogs.vue (a page component) I try to register two components.
<template>
<div>
<h1>Experiences</h1>
<TheSidebar>
<SearchBlog />
<CategoryCheckboxFilter />
</TheSidebar>
<ExperienceList />
</div>
</template>
It seems like I cannot register two components in a slot?
Is this a good setup anyway and who do I have to achieve this?
Update
It's just working fine now and I can register more than one component in a <slot />. I think some webpack building issue before.
I have a modal.vue component as follows:
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" #click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
How do I mount this component to the applications root element rather than in place?
For crude inaccurate example:
<body>
<div id="app">
<div class="header"></div>
<div class="nav"></div>
<div class="stage">
<div class="sub-nav"></div>
<div class="content">
<modal :display.sync="display">MY MODAL</modal> <-- Don't mount here...
</div>
</div>
<-- Mount here instead...
</div>
</body>
The current issue is that my sites header and navigation is layered on top of my modal and it's darkened full screen overlay instead of layered behind the modal overlay.
Update for Vue 3
There is now a built in feature called teleport which allows mounting parts of your component template to any DOM element.
The example from the OP would look like something like this
<!-- MyModal.vue -->
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" #click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
<!-- SomeDeeplyNestedComponent.vue -->
<template>
<teleport to="#app">
<!-- Can still receive props from parent -->
<MyModal :my-prop="foo">
<!-- slot content -->
</MyModal>
</teleport>
</template>
Vue 2
Move the elements own self to the element of applications root may be achieved in two ways, Using a portal as a preferred solution or using an append.
Using a Portal (Preferred Method)
PortalVue is a set of two components that allow you to render a
component's template (or a part of it) anywhere in the document - even
outside the part controlled by your Vue App!
https://portal-vue.linusb.org/
Using an Append (Not best practice)
If adding a portal library is too heavy, using an append is allowed but lightly discouraged officially in the VUE docs.
Typically this particular mount position will satisfy a z-index overlay for your own modal or dialog popup that you require to render over the top of the entire app. You can always substitute this.$root.$el in this example for a different element target using standard getElementBy or querySelector functions.
Here the element is being moved not destroyed and re-added, all reactive functionality will remain in tact.
<script>
export default {
name: 'modal',
...
mounted: function() {
this.$root.$el.append(this.$el);
},
destroyed: function() {
this.$el.parentNode.removeChild(this.$el);
}
}
</script>
On mounted the element is moved inside of where the top level VUE app instance is mounted.
On destroyed removes the placeholder DOM comment for the migrated component from the new parent to prevent orphaned duplication each time the component remounts it's self.
VUE officially states not to destroy an element outside of VUE so this is not to be confused with that statement, here the component has already been destroyed.
This DOM comment duplication will typically happen when for example switching views with vue-router as this mechanism mounts and dismounts all components in a router view each time vue-router view state changes.
This behaviour is a bug cause by vue-router, the object is destroyed properly by VUE render manager but an index reference remains by mistake, using a portal package resolves this issue.
Here is the result: