How can I translate my route with VueJS and vue-i18n?
You can check my repo here:
https://github.com/polikin/vuejs-boilerplate/
Ex:
/en/about-us
/fr/a-propos
As far I know Vue-i18n doesn't do it out of the box. But you can use route aliases:
const router = new VueRouter({
routes: [
{ path: '/en/about-us', component: YourComponent, alias: '/fr/a-propos' }
]
})
alias can also be an array.
In case you would go for Nuxt - there is a nuxt-i18n module which internally uses vue-i18n but adds a ton of convenience features. It prefixes the locale of your rout so you're done.
Related
I am building a project using Laravel/Inertia/Vue and I am using Tailwind CSS.
I want to have separate admin.css and client.css files using tailwindcss 3.2 ability to have multiple config files:
./styles/admin.css
#config "./tailwind.admin.config.js"
#tailwind base;
#tailwind components;
#tailwind utilities;
but the problem is that Vite will build just app.css for me not the admin one
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
ssr: {
noExternal: ['#inertiajs/server'],
},
server: {
host: "localhost",
},
});
app.css is imported in app.js
I can not figure it out
Could you please help me?
I want to have separate admin.css and client.css files per each tailwindcss config file.
You can pass an array of input files to vite as follows:
input: ['resources/js/app.js','resources/css/admin.css','resources/css/client.css']
This should result in seperate output files in your build directory.
If you want to keep the css as javascript import you can create a second InertiaApp for the admin area:
Copy app.js and rename it like 'admin.js'
Change css import in admin.js to '/styles/admin.css'
Change your vite input to: input: ['resources/js/app.js','resources/js/admin.js']
Use a different blade layouts for the 'admin' area with reference to admin.js instead of app.js : #vite('resources/js/admin.js')
Thanks #dustin for your answer. Here are some more things:
I can split javascript application by defining multiple rootViews using inertia-laravel#0.3.2 in HandleInertiaRequests.php middleware:
public function rootView(Request $request)
{
if ($request->routeIs('admin.*')) {
return 'admin';
}
return 'app';
}
And have two different apps.
But do you think its a good approach to have two different apps?
I like the separation idea but is it the right way?
I Also have concerns about bundling and mixing in inertia and ssr, would it be a problem for that when you have two apps? I dont know anything about inertia's way of working
I was hoping there is some other method like creating a higher order component or something like that. I am very new to Vue world and I am still trying to learn.
We've run into some problems for our MultiSite Spartacus setup when doing I18n.
We'd like to have different translations for each site, so we put these on an API that can give back the messages dependent on the baseSite, eg: backend.org/baseSiteX/messages?group=common
But the Spartacus setup doesn't let us pass the baseSite? We can
pass {{lng}} and {{ns}}, but no baseSite.
See https://sap.github.io/spartacus-docs/i18n/#lazy-loading
We'd could do it by overriding i18nextInit, but I'm unsure how to achieve this.
In the documentation, it says you can use crossOrigin: true in the config, but that does not seem to work. The type-checking say it's unsupported, and it still shows uw CORS-issues
Does someone have ideas for these problems?
Currently only language {{lng}} and chunk name {{ns}} are supported as dynamic params in the i18n.backend.loadPath config.
To achieve your goal, you can implement a custom Spartacus CONFIG_INITIALIZER to will populate your i18n.backend.loadPath config based on the value from the BaseSiteService.getActive():
#Injectable({ providedIn: 'root' })
export class I18nBackendPathConfigInitializer implements ConfigInitializer {
readonly scopes = ['i18n.backend.loadPath']; // declare config key that you will resolve
readonly configFactory = () => this.resolveConfig().toPromise();
constructor(protected baseSiteService: BaseSiteService) {}
protected resolveConfig(): Observable<I18nConfig> {
return this.baseSiteService.getActive().pipe(
take(1),
map((baseSite) => ({
i18n: {
backend: {
// initialize your i18n backend path using the basesite value:
loadPath: `https://backend.org/${baseSite}/messages?lang={{lng}}&group={{ns}}`,
},
},
}))
);
}
}
and provide it in your module (i.e. in app.module):
#NgModule({
providers: [
{
provide: CONFIG_INITIALIZER,
useExisting: I18nBackendPathConfigInitializer,
multi: true,
},
],
/* ... */
})
Note: the above solution assumes the active basesite is set only once, on app start (which is the case in Spartacus by default).
I am building a navigation system for a Next.js app that would have routes like
http://localhost:3000/docs/section1/pageName
http://localhost:3000/docs/section2/pageName
etc
Under the hood these routes will point to a page /docs/:slug which is achievable with rewrites:
async rewrites() {
return [
{
source: '/docs/section1/:slug',
destination: '/docs/:slug'
},
{
source: '/docs/section2/:slug',
destination: '/docs/:slug'
}
];
}
But I'd like to pass the sectionN as a context variable to the destination path. So that the slug page could know which section was referred to originally. The purpose is to minimize the amount of underlying pages but to keep the pages navigation meaningful to user or search bot.
I understand that rewrites support/api can be limited. Checking the context in getInitialProps - original artificats are not available. Is there a way maybe to approach this differently in Next.js?
#felixmosh suggested in a comment to simply go with next.js dynamic routing that allows to use multiple slugs in the paths, no need to use rewrites.
That works!
Here goes the link to the official manual - https://nextjs.org/docs/routing/dynamic-routes.
Found solition:
async rewrites() {
return [
{
source: '/work/:slug/:path*',
destination: '/work/:slug',
},
]
},
I hava a laravel project, there is a README.md in the root directory. I can see the render result after pushing to GitHub, but I want to render markdown document in the local development browser.
I am trying two ways:
Read file from markdown file
convert markdown file to html with something like Webpack
Who can give a demo for this?
Since the mail blade templates parse markdown, you can use a similar approach to layout.blade.php which uses Illuminate\Mail\Markdown::parse.
In your template, such as welcome.blade.php, add this:
{{ Illuminate\Mail\Markdown::parse(file_get_contents(base_path() . '/README.md')) }}
Here is a Laravel Mix / Webpack solution, convert markdown file to html, and required in Vue.js, then show it with v-html.
First add markdown-loader
yarn add markdown-loader html-loader
Add config in webpack.mix.js, Laravel Mix can add custom config of Webpack.
mix.webpackConfig({
module: {
rules: [{
test: /\.md$/,
use: ["html-loader", "markdown-loader"],
}]
}
});
Considering README.md is in the root of Project, add a alias in webpack.mix.js
mix.alias({
'#': '/resources/js',
'#root': '/',
});
Now we can use a vue component to show the README.md at the root directory.
<script>
const readme = require('#root/README.md')
export default {
data() {
return {
readme: ""
}
},
created() {
this.readme = readme
}
}
</script>
<template>
<div class="container" ref="container" v-html="readme" />
</template>
I'm still new to Angular 2 and was wondering if there is a way to let a component 'fly in' and let another component 'fly out' when switching routes. Let's say I have 2 components: Test1Component and Test2Component and 2 routes pointing to each of them. What would be the best way to do it?
https://github.com/angular/angular/issues/9845#issuecomment-235799008
RC5 will hopefully be out this week, if not then next week.
For now (with RC5) you will need to do this for every component that
is routed to and you want to add animations to:
#Component({
host: {
'[#routeAnimation]': 'true'
},
animations: [
trigger('routeAnimation', [
transition('* => void', animate(...)),
transition('void => *', animate(...))
])
]
})
class Cmp { }
Once we get query() and $variables into animations then you can use
<router-outlet> with the URL API that I wrote above.