Nuxt i18n does not load cookie language in root directory - vue.js

Whenever I select a language in my application, it saves this parameter in the "lang" cookie, but accessing the root (http://localhost) without the language path (http://localhost/en) it loads the default language "pt", even the cookie set in another language "en" or "es". This is normal? Or is there any configuration for this type of situation?
[
'nuxt-i18n',
{
locales: [
{
code: 'en',
file: 'en.js'
},
{
code: 'es',
file: 'es.js'
},
{
code: 'pt',
file: 'pt.js'
}
],
lazy: true,
langDir: 'lang/',
parsePages: false,
strategy: 'prefix',
defaultLocale: 'pt',
rootRedirect: 'pt',
detectBrowserLanguage: {
useCookie: true,
cookieDomain: null,
cookieKey: 'lang',
alwaysRedirect: false,
fallbackLocale: 'pt'
},
}
]
Method change lang:
changeLanguage(lang) {
this.locale = lang
this.$i18n.setLocale(lang)
this.$moment.locale(lang);
},

I found that I needed to set the alwaysRedirect parameter to true, it forces the redirect by the cookie.
detectBrowserLanguage: {
alwaysRedirect: true
},

Related

Multi Remote execution

I am currently facing issue while trying achieve execution of Chrome Browser and Appium execution from browser stack from a single spec file
Below is the code written with multiple capabilities
Attaching log screensot
require('dotenv').config();
require('ts-node').register({ transpileOnly: true });
import { baseConfig as config } from '../test-android-e2e/config/wdio.base.android.conf';
import { baseConfig as configChrome } from '../test-wms-e2e/config/wdio.base.conf'; // inherits base config file
require('ts-node').register({ transpileOnly: true });
import _ from 'lodash';
import os from 'os';
import { TimelineService } from 'wdio-timeline-reporter/timeline-service';
let suiteName = '';
const overrides = {
updateJob: false,
specs: ['./test/specs/**/*.ts'],
specFileRetries: 4,
runner: process.env.RUNNER,
connectionRetryCount: 3,
framework: process.env.FRAMEWORK,
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
exclude: [],
// ...
user: process.env.BROWSERSTACK_USER,
key: process.env.BROWSERSTACK_ACCESSKEY,
services: ['browserstack', [TimelineService], 'chromedriver'],
reporters: [
[
'allure',
{
outputDir: 'allure-results',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: true,
},
],
['timeline', { outputDir: 'screenshots' }],
],
capabilities: {
Android: {
capabilities: [
{
'platformName': 'Android',
'appium:deviceName': 'Samsung Galaxy S21',
'appium:platformVersion': '11.0',
'appium:app': 'sampleid',
'bstack:options': {
'projectName': 'test-android-e2e',
idleTimeout: '300',
},
/* this locale will set device default location as US.
However it does not update language. Hence added separate capability for language */
'appium:locale': 'En-US',
'appium:language': 'En',
},
],
},
Chrome: {
capabilities: [
{
browserName: 'chrome',
'goog:chromeOptions': {
args: [
// 'user-agent=e2e-agent',
// '--headless',
'--disable-dev-shm-usage', // Force Chrome to use the /tmp directory instead. This may slow down the execution though.
'--disable-gpu',
'--no-sandbox',
'--window-size=1920,1080',
'--verbose',
'--trace-startup=-*,disabled-by-default-memory-infra',
'--trace-startup-file=/screenshots/trace.json',
'--trace-startup-duration=7',
],
},
},
],
},
// path: '/',
},
};
// Send the merged config to wdio
exports.config = _.defaultsDeep(overrides, config);
exports.config = _.defaultsDeep(overrides, configChrome);
Screenshot 1
Screenshot 2

TypeOrm + Sqlite works only in development [React Native + Expo]

On development the app database works very well but when I generated APK it just not work, I can't use the database.
I found this answare of jbenzshawel:
1º: yarn add metro-minify-terser
2º: Update the metro config to keep class names and file names. Add the following to the metro.config.js transformer:
minifierConfig: {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
},
So if you need to create metro.config.js add the following:
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierPath = 'metro-minify-terser';
config.transformer.minifierConfig = {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
};
module.exports = config;

How I can remove trailing slash?

I use Nuxt.js with nuxt-i18n in "strategy: 'prefix'" mode. About this strategy.
And I have a problem:
when I try get the homepage of application, Nuxt redirect me to localhost:3000/en/, but I need redirect to localhost:3000/en. Without this pernicious trailing slash on the end!
There is snippet of my nuxt.config.js file:
modules: [
['nuxt-i18n',
{
locales: ['en', 'es'],
defaultLocale: 'en',
strategy: 'prefix',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
greeting: 'Hello world!'
},
en: {
greeting: '¡Hola mundo!'
}
}
}
}]
]
Any ideas?
I have used #nuxtjs/redirect-module, and set redirect options { from: '/en/', to:'/en' }. It works.

More extensive mangling terser-webpack-plugin?

Is there a way to thoroughly mangle vue components that have been bundled with webpack?
When applying mangling via terser-webpack-plugin with mangle.properties set to true, then not all of the property names are mangled, for example:
location: {
lng: -.134281,
lat:51.513508,
zoom:13,
pitch:1,
bearing:60
}
becomes
location:{
k:-.134281,
M:51.513508,
zoom:13,
pitch:1,
V:60
}
Edit
As requested: the relevant portion of the Webpack configuration file, in this case the default vie-cli config with the mangle.properties item manually added:
minimizer: [
{
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: () => true,
warningsFilter: () => true,
extractComments: false,
sourceMap: false,
cache: true,
cacheKeys: defaultCacheKeys => defaultCacheKeys,
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
terserOptions: {
output: {
comments: /^\**!|#preserve|#license|#cc_on/i
},
compress: {
arrows: false,
collapse_vars: false,
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false,
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: true,
evaluate: true
},
mangle: {
safari10: true,
properties: true
}
}
}
}
],
These two properties (zoom, pitch) so happened to be included in the reserved name list, have a look at this default domprops.json file which UglifyJS uses internally during mangling.
A default exclusion file is provided in tools/domprops.json which should cover most standard JS and DOM properties defined in various browsers. Pass --mangle-props domprops to disable this feature
If you like to keep this default list, you could do any of the following in the custom minify option of the plugin:
Create your custom reserved name list,
Load up the default list (domprops.json) and pass in a function/filter for removing those unwanted names,
Simply merge these two files if you are sure there is no name conflict.
webpack.config.js
{
optimization: {
minimizer: [
new TerserPlugin({
minify(file, sourceMap) {
const uglifyJsOptions = {
mangle: {
properties: {
reserved: require('your_custom_list')
}
// Or filter them
properties: {
reserved: require('uglify-js/tools/domprops.json')
.filter(name => ![
'zoom',
'pitch'
]
.includes(name))
}
}
};
return require('uglify-js').minify(file, uglifyJsOptions);
},
}),
],
},
}
Also, please mind the similarities between mangle.reserved and mangle.properties.reserved while doing this, as the latter one might be what you need here. Check out the minify option structure.

Weyland output map file and optimize css?

How do I configure weyland to optimize the css files and also include the map file of the js in the output?
My current config is:
exports.config = function(weyland) {
weyland.build('main')
.task.jshint({
include: 'App/**/*.js',
exclude: ['App/main-built.js'],
})
.task.uglifyjs({
include: ['App/**/*.js', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
})
.task.rjs({
include: ['Content/**/*.css', 'App/**/*.{js,html}', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
loaderPluginExtensionMaps: {
'.html': 'text',
},
rjs: {
name: '../Scripts/almond-custom', //to deploy with require.js, use the build's name here instead
insertRequire: ['main'], //not needed for require
baseUrl: 'App',
mainConfigFile: 'App/main.js', //not needed for require
wrap: true, //not needed for require
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
preserveLicenseComments: false,
generateSourceMaps: true,
//optimize : 'none',
optimize: 'uglify2',
optimizeCss: 'standard.keepLines',
pragmas: {
build: true
},
stubModules: ['text'],
keepBuildDir: true,
out: 'App/main-built.js'
}
});
}