Dynamic multilingual sites from the backend to the replacement of large sites
I changed the language, but this time I am trying for the first time to do it at the front desk (Nuxt.js + i18n).
<a href="https://gooogle/en.com" data-link="fugafuga">
Without using nuxt-link
<template>
<a href="https://gooogle/｛｛t('locale')｝｝.com" data-link="｛｛t('hogehoge')｝｝" >
</template>
Is it possible to divert and use a tag as it is?
(In the above writing method, an error occurred and it was useless, so please teach me a workaround)
I18n t method wrapped in quotes in inside tag quote
How do I write it?
Such a shape is desirable because the scale is too large
We apologize for the inconvenience, but we would appreciate it if you could teach us.
thank you.
Suggested fix:
<template>
<a :href="`https://google/${t('locale')}.com`" :data-link="t('hogehoge')"></a>
</template>
You can read more about data binding with Vue/Nuxt here: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax
Related
I am a newbie in Vue.js. I am currently using Vue.js on top of asp.net core.
I noticed that in 99% time page is served before Vue.js syntax is rendered. How can I prevent this from happening?
For example
When page load first I see
<ol>
<li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li>
</ol>
And then after split of a second I see
<ol>
<li>John - john#domain.com</li>
<li>John1 - joh1n#domain.com</li>
</ol>
Since the template is written inside the page HTML code it will always be shown first by the browser when it’s loading the page. Usually Vue components include a template which is used to render the data and this won’t happen.
You can take the template that is written on the page and add it to the Vue component so it will use it to render, not the contents of the page. The simplest way is to just add the template as a parameter to the Vue component, but later on it may be better to use separate template files, or Single File Components which may take a bit more work.
I have my
v-html="customButtons"
and I want to insert in this v-html a v-on:click with custom function like this
<div class="v-m-button">
<button type="button" id="btn-cancel" class="btn btn-sm btn-success"
v-on:click="saveButtonClick()">
<span>Save</span>
</button>
</div>
^code above will be pass to customButtons v-html tag
help me with this thanks!
I ran into the same issue and here are the solutions I found:
On Vue 2, there is this article that might help some people: https://www.programmersought.com/article/53615036178/
On Vue 3, there is this library over there, that I used with success.
However, as mentioned by others elsewhere there are a good reasons why this is made so hard to do. Maybe the security reasons are not a big concern for you. But say that your app grows and is so widely used that performance becomes your main concern; then you may want to rebuild your front-end using Svelte instead of Vue. Then, all your #click=this... (vue specific code) in the html sent by you API will become almost unusable by the Svelte app, at which point you might tell to yourself:
"It would have been way simpler to just send those as json metadata and build the appropriate interface instead of trying to 'win time' by brute-forcingly favoring a bad data structure."
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>
I looked in the documentation, on the forum ... I would like to know this:
When I create a component with a scoped style. Should I use classes or id for my DOM ? I prefer ID because this element is unique.
ex:
<template>
<div id="wrapper"> // or class="wrapper" ?
<button id="myBtn">CLICK</button> // or class="myBtn" ?
<div v-for="i in 5" :key="i" class="myDiv">{{i}}</div> // sure class in this case :D
</div>
</template>
For the methods of the component must prefix by $ _mycomposant_methods or can I directly write method?
Same for computed?
I imagine that when compiling (webpack) each component is scoped but I would like to be sure to avoid edge effects.
Thank you
You do not need either.
Vue will automatically take care of the scope and give the component a unique data-hash which then is taken to write your css. It really works well. Give it a try ;)
And your methods and computed properties are working just like normal. nothing to take care of.
For the first question, I think you should keep using class.
Although with the help of component-scoped CSS, you don't need to worry much about the interference from other components' stylesheets, all the templates will still be merged into one document. Vue.js just adds unique data attributes to the elements, it doesn't guarantee every id's uniqueness you defined.
So in order to keep flexibility and avoid potential troubles, it will be a wise choice to follow specifications of HTML which means keeping wrapper as a class if it appears in your HTML document several times.
For the second and third question, I prefer to keep the method names easy to read and understandable. All the JavaScript code will going to be minified and uglified, so there's no need to add any prefix.
I'm working on a Meteor app that gets data from Facebook & I would like to use jquery-layout for presentation. I suspected that there might be some "subtleties" when trying to use jquery to modify HTML in reactive templates, so I set up a relatively simple test case that goes something like this (paraphrased for brevity)...
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
{{> partialCenter}}
{{> partialEast}}
{{/with}}
{{layItOut}}
</template>
Template.mainTemplate.userInfo returns contents of a Session variable that starts with a default value and asynchronously get updated with info from Facebook.
Template.mainTemplate.layItOut sets up a call to Meteor.defer with a callback fcn that actually executes the 5 lines of jquery-layout code.
And that seems to work pretty well...
the initial display is as expected/intended (although there's a brief period where the page is not laid out)
any updates to the reactive context cause re-execution of the layout (again, w/brief-but-visible re-layout)
So, why am I whining? Mostly I would like to find a cleaner approach that does away with the noticeable re-layout activity.
I could make the reactive contexts more granular, but I'm not sure that this would really help.
Alternatively, I suppose I could experiment with directly controlling rendering (e.g., via Meteor.ui.render() , but that sounds like a lot of work ;-)
I think what I'd really like is either
a) a way to hook into Meteor render events
or better still
b) a cleaner way to connect query-layout to templates
Thoughts?
So I managed to educate myself enough to answer my own question in case anyone else finds it useful. Bottom line is that I was wrong on several levels; making the reactive contexts more granular is the answer (or at least an answer).
In the example I gave, I made the whole page reactive by placing all of the rendering within the #each construct. What I now do is try to make the reactive contexts as small as possible so that only a (relatively) small part of the page is re-rendered on any reactive change and all of the reactive elements are contained below (or way below) the level of the jquery ui elements.
I.e., something like this:
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
...
{{/with}}
{{layItOut}}
</template>
<template name="partialNorth">
<div class="ui-layout-north"> <-- definition for jquery-layout north panel
<h1>This is the north pane</h1>
<p>The user data go next:</p><br />
{{> templateUserData}}
</div>
</template>
<template name="templateUserData">
<div>
{{#with theUserData}} <-- Assumes a helper function 'theUserData' for this template
<p>First name: {{first_name}}</p>
<p>Last name: {{last_name}}</p>
...
{{/with}}
</div>
</template>
Once you have the reactive elements below the jquery ui elements (I have tried it with panels, tabs, accordions, buttons and pop-ups so far) the whole thing works just like it said it would in the shiny brochure! ;-)