What is the recommended way to translate something like this using VueJS / NuxtJS using the i18n module:
<div>
The bear was <AnimationStriked word="never" /> tired!
</div>
The only option i could think of is something like v-if="$i18n.locale == 'de'" {...} but this doesn't seem right especially for longer texts with multiple components.
Is it possible to pass a component as a variable into a translation? I am grateful for any hints.
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.
Let's say there is a global component BIcon.vue available everywhere.
And another component, but regular not global, called BIconFake.vue.
We can override BIcon.vue by BIconFake.vue like that:
<template>
<div>
<b-icon icon="plus"><!-- <- Here is it BIconFake component! -->
</div>
</template>
<script>
import BIcon from '~/components/BIconFake'
export default {
components: {
BIcon // <- BIconFake component inside!
}
}
</script>
By this way, Vue.js will display BIconFake component instead of regular BIcon component.
I tried to pass props, events or attributes and it works like expected.
Vue.js is awesome... and big. Really, I don't know everything about it, and I don't want to see side effects or unexpected behavior when doing this override.
So, I want to know if it's safe to do that? Does it make a mess in Vue.js instance? What about memory?
we can override component with pure vue.js. Also, I made this example for Buefy, but we can do that with any UI frameworks like Quasar, Vuetify...
Thinking globaly, Is it good to override components of UI frameworks? What about security, scalability and maintenability?
In fact, I searched a way to build a plugins or addons system to my Nuxt.js app, like wordpress plugins.
Is it a good architecture to start building my app by overriding vue component? Is there another way to build app addons for vue, by using npm or webpack?
If you are going to wrap existing components like that then you should keep in mind the Liskov substitution principle. <b-icon-fake> can likely be used in place of <b-icon> provided that it:
accepts the same props
emits the same events
exposes the same public methods (if it is used with a ref)
behaves in the same way
Most of those points probably do not apply for a simple <b-icon> component.
Also keep in mind the template of your wrapped component now includes an extra <div> around it. This can interfere with styling and things like that.
You can eliminate the additional memory overhead by using a functional component instead, but you will need to write the render function manually to preserve the behavior of the wrapped component. But honestly I wouldn't worry too much about memory usage unless you have determined it to be an issue (after profiling your app).
In terms of whether it is "good" to do this or not, I can't say. There are advantages and disadvantages. In my opinion, wrapping components is fine as long as you are the only consumer of the wrapper component and doing so doesn't affect any existing usage of the wrapped component outside of your code.
I am new in VueJs and bootstrap vue.
When i use for example the input through my application 100 times and bootstrap-vue is going to change the component then i have to change this through my whole application.
Building my own input component with the bootstrap vue component is that a solution?
How can i achieve this?
<b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
BootstrapVue has pretty much stabilized and one shouldn't see much change in the props (except for maybe expanded usage, or new props). Props that are deprecated or have deprecated syntax, will be noted in the documentation ahead of being removed.
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!
I'm building a Single Page Application using, Vue, Vue-router and Vuex. I've tried to implement Algolia Instantsearch vuejs, but I'm having some issues. Since my app is using a lot of nested components, I'm having a hard time figuring out how to structure this one.
This is the basic structure:
- App
- Header (this is where the search input is placed)
- Content
- Search (this is where the refinements and results are shown)
- Footer
I've read the documentation, but I might have missed something. Let's say the user is on the homepage, when starting typing into the searchinput in the Header component. I then use vue-router to go to /search, but this doesn't seem to work?
I don't know how to do this? As from what I can understand, the documentation only show you how to sync with vue-router and now how to handle my scenario.
I believe this is a fairly common use case for instantsearch, but I couldn't find anything searching through Google. Maybe because, I don't know how to describe the issue.
I hope you can help.
Thanks!
If you use the latest version of vue-instantsearch, you may use ais-configureas describe by https://www.algolia.com/doc/api-reference/widgets/configure/vue/.
<ais-instant-search :index-name="indexName" :search-client="searchClient">
<ais-configure :query="query" />
<ais-hits>
<div slot="item" slot-scope="{ item }">
<h2>{{ item }}</h2>
</div>
</ais-hits>
</ais-instant-search>