What would be the best implementation of i18n. It's for a webapp so I don't want to update the url based on locale.
I am using nuxt frameworks so I researched nuxt-i18n but that's not possible without updating the url.
in nuxt.config.js/ts
i18n: {
...
strategy: 'no_prefix',
...
}
to change the locale, use something like:
changeLocale() {
this.$i18n.setLocale(this.$i18n.locale === 'en' ? 'tr' : 'en')
}
I tried to create a simple example, but we can still improve.
In this approach, I tried to use cookies instead of the path, and to do so I need to make a refresh page when we switch languages or else our components wouldn't load the new translations.
Check here: https://codesandbox.io/embed/example-i18n-mo8t7?fontsize=14
Related
Question:
What is the proper way to define an alias for external links in vuepress2 or vuejs?
Problem:
I have a documentation site hosted in github pages, I want to link some source files to documentation.
[task-runner.json](https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json)
this works but I rather create an alias for the base path. something like this:
#repo :
https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json
and use it like this
[task-runner.json](#repo/.husky/task-runner.json)
Notes:
because vuepress2 is using vuejs3, probably vuejs solution works too
vuepress default-theme also has repo configuration, is there any way to use it in router-links or md-files?
import type { DefaultThemeOptions } from 'vuepress'
export const themeConfig: DefaultThemeOptions = {
docsRepo: 'alirezanet/husky.net',
repo: 'alirezanet/husky.net',
}
I'm using this library #uifabric/merge-styles from office-ui-fabric. My question is how to use vendor prefixes inside mergeStyleSets?
Example -webkit-filter:
import { mergeStyleSets } from '#uifabric/merge-styles'
mergeStyleSets({
webkitFilter: 'blur(5px)', // Error! No Typescript definition.
})
Is there any other way to achieve this?
Merge Styles Library
It looks like there is no Typescript definitions for it
IRawStyleBase.ts
Addition to #Vitalie Braga answer:
This is temporary solution if you are using Typescript project:
const foo = mergeStyleSets({
root: [
{
backgroundColor: '#f00',
...({ '-webkit-filter': 'blur(5px)' } as any)
},
]
})
Issues Page - Git OFFICE UI FABRIC
#uifabric/merge-styles library has smarts about automatic vendor prefixing for you but the only issue with that is that the rules that are auto-prefixed today are limited to just one: user-select. I would advise you go and submit an issue in their github repo here and either ask if new rules can be added or ask how to handle this situation.
From a deeper investigation looks like they have some vendor specific support but is very limited in IRawStyleBase.ts. Those rules will automatically be transformed into vendor rules.
So to answer your questions if you are using a TS project there is no way you can specify something that is not compatible with the IRawStyleBase interface but if you are using a js script you can probably try your luck as I did in this code-sandbox and it looks like the filter get's through but nothing else.
I´m trying to use a different set of routes for each vhost
module.exports = function(app) {
app.use(vhost('www.example.com', exampleRoutes))
app.use(vhost('*.example.com', subdomainRoutes))
}
My problem is that www.example is also using the routes from subdomainRoutes
I need to somehow specify that if I´m under www then only the exampleRoutes should work
update. looks like I can use a regexp. I will need something like
not(www.example.com) but I´m terrible with regexp :(
laving this here in case someone needs it.
const regex = new RegExp('^(?!.*www.example.*).*$');
app.use(vhost(regex, subdomainRoutes))
I am using Nuxt to create my application and I have a group of pages that are related in a way.
So I will simplify things a bit but my current structure looks like this
/pages
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
This folder structure is creating /login, /registration, /forgot-password, /resend-confirmation-email routes, which is cool.
So, in a way I can group first four pages to a group and name it authorization.
Ideally new folder structure should look like
/pages
/authorization
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
However what I would like is for the router to not get messed up, I would very much like for those routes to remain the way they were.
Is that possible?
So with no plugins and stuff, what I did was replacing the folder name from route object in extend routes function.
File nuxt.config.js
router: {
extendRoutes(nuxtRoutes) {
nuxtRoutes.map(route => {
route.path = route.path.replace('/authorization', '');
route.name = route.name.replace('authorization-', '');
return route;
});
},
....
}
This looks like a hack to me, but it actually does exactly what I want. For some larger projects I might consider fully overriding the router but this is kinda okay for now.
You can use nuxt router extras module
https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md
<router>
path: /posts
</router>
I have a list of items along with a filter. I'd like to store the filter options in the window.location.hash property, so that I have nice sharable urls.
I am struggling to build a hash fragment which will work, using URI.js.
Vue.js 2.4.4
URI.js 1.19.0
What I've done so far
import Uri from "urijs";
let UriFragment = require('../../node_modules/urijs/src/URI.fragmentURI.js');
// UpdateHash method
let uri = new Uri(window.location.href);
uri.fragment({
providers: ['best', 'bestest'],
sort: 'recommended'
});
window.location.hash = uri.fragment();
What's happening?
example.com/list-of-things#![object Object]
What I expected to happen
As per the docs about 'fiddling with the fragment' http://medialize.github.io/URI.js/
example.com/list-of-things#providers=best&providers=bestest&sort=recommended
Question
How can I ensure that the plugin for URI.js is loaded and working? Then move onto figuring out why it's not outputting a formatted uri fragment.
I knew as soon as I posted, I would find the answer.
I was trying to use code for URI.fragmentURI.js when in fact I wanted URI.fragmentQuery.js.
Swapping to the correct plugin for the library has solved this problem.