Good afternoon, I'm studying Vue and trying to make a multilingual application, I found this package and installed it - https://github.com/xiCO2k/laravel-vue-i18n
I managed to connect it, and the translation works.
But I can't figure out how to do the language change? The documentation says it:
import { loadLanguageAsync } from 'laravel-vue-i18n';
<template>
<div>{{ $t('Welcome!') }}</div>
<button #click="loadLanguageAsync('pt')">Change to Portuguese Language</button>
</template>
, but I don't understand how use it,
What code to use in the method? I will be very grateful to you if you show an example of a method for changing the language.
My app.blade.php
<html lang="{{str_replace('_', '-', app()->getLocale())}}">
My langs: en.json | en.json
My vue.js
#click="switchLanguageTo('en')"
import {i18nVue, loadLanguageAsync} from 'laravel-vue-i18n';
methods: {
switchLanguageTo(lang) {
// here i dont understand
loadLanguageAsync(lang);
// here i dont understand
},
},
it's quite simple.
By calling loadLanguageAsync function you can change your language immediately.
<script setup>
import { loadLanguageAsync } from 'laravel-vue-i18n';
</script>
<template>
<h1> {{ $t('Hello World')}} </h1>
<button class="hover:underline" #click="loadLanguageAsync('fr')"> Change language </button>
</template>
/lang/fr.json
{
"Hello World": "Bonjour le monde"
}
Related
This is probably really easy and I'm just missing something. I have a vue router page with links that all load up correctly and display correctly.
Hard part out of the way (well it was for me).
I would like to utilise some meta style data attached to each route to provide the page heading title.
So for example:
{
path: '/scenarios',
meta: {
title: "Scenarios!"
},
name: 'Scenarios',
component: Scenarios
}
The route with a meta title.
I would like to pull this data from here within the route declaration
Stick it on a vue page like this:
<template>
<span>
{{ $route.name }}
</span>
</template>
<script>
export default {
name: "PageTitle"
}
</script>
(this actually works to show the route name at the moment)
And I would like to plug it into my template like this:
<h1 class="h2">#yield('page-name')
<page-title></page-title>
</h1>
(I am using Laravel (5.8 I think))
This similar post might help (using a directive) Pass var to vue router in meta but it would be nice to know if its simpler than that. Thoughts?
Screw it, ive answered my own question
changed:
<template>
<span>
{{ $route.name }}
</span>
</template>
to:
<template>
<span>
{{ $route.meta.title }}
</span>
</template>
I am fairly new to Vue and currently am working on the first project with it.
I have encountered this problem which I cannot seem to find a solution for, I have "AuthPage.vue" component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue file with custom element it seems to be working perfectly. I am not sure what I am doing wrong.
AuthPage.vue
<template>
<div>
<div class="page-brand-info"></div>
<div class="page-login-main">
<img class="brand-img" src="/assets/global/images/logo.jpg">
<h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
<slot name="message"></slot>
<slot></slot>
<footer class="page-copyright">
<p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</template>
<script>
import LoginForm from './LoginForm.vue';
import ResetPasswordForm from './ResetPasswordForm.vue';
export default {
components: { LoginForm, ResetPasswordForm }
}
</script>
login.blade.php
#extends('backoffice.layout.auth')
#section('content')
<auth-page>
<template v-slot:title>Sign In</template>
<login-form></login-form>
</auth-page>
#endsection
Thank you for your help!
Eddie
You'll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of your component, Vue doesn't know what <login-form> is.
Since you're using laravel, in your resources/js/app.js file add the following:
import LoginForm from './path/to/LoginForm.vue';
Vue.component('login-form', LoginForm);
I'd like to use the same loader as Laravel Nova uses when it's components are loading. I can't get it to compile. It never recognizes where to load the LoadingCard component from. Any help would be appreciated.
<template>
<div>
<heading class="mb-6">Tax Calculator</heading>
<loading-card :loading="loading" class="card relative overflow-hidden w-1/3">
<div v-if="countries.length">
<!--Make form-->
</div>
</loading-card>
</div>
</template>
<script>
import LoadingCard from 'laravel-nova'
export default {
mounted() {
let vue = this;
Nova.request().get('/nova-vendor/tax-calculator/mount')
.then(response => {
vue.countries = response.data.countries;
vue.states = response.data.states;
});
},
}
</script>
<style>
/* Scoped Styles */
</style>
Figured it out. Apparently all the Nova built-in components are available globally. Didn't realize this. All I needed to do to get it to compile was remove the import statement. I modified the code as follows:
<template>
<div>
<heading class="mb-6">Tax Calculator</heading>
<loading-card :loading="loading" class="card relative overflow-hidden w-1/3">
<!--Make form-->
</loading-card>
</div>
</template>
<script>
export default {
mounted() {
let vue = this;
Nova.request().get('/nova-vendor/tax-calculator/mount')
.then(response => {
vue.countries = response.data.countries;
vue.states = response.data.states;
});
},
}
</script>
<style>
/* Scoped Styles */
</style>
For those looking for the list of all the global laravel nova vue components, you can find here:
nova/resources/js/components.js
I have read the docs and dozens f stackoverflow topics about implementing CKeditor with the upload adapter CKfinder. But none are in vue. Only about CKeditor but nothing about the CKfinder. The docs are so unclear to me and I have read some other topics complaining about it too. So I hope someone here can help me to understand how this works.
So this is what I have right now:
<template>
<section class="j-input-text-editor row">
<label v-if="label" :class="label_class">
{{label}}
</label>
<div :class="input_class">
<ckeditor ref="editor" :editor="editor" v-model="mValue" #input="updateValue"></ckeditor>
</div>
</section>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
name: "textEditor",
data() {
return {
mValue: '',
editorData: '<p>Content of the editor.</p>',
editor: ClassicEditor,
}
},
created() {
ClassicEditor
.create( this.$refs.editor, {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' // here you can set your own file path
}
} )
.then(console.log('yeay'))
.catch(console.log('error'));
},
}
</script>
So i tried uploading an image in the editor and i get this:
Like I said. I'm totally stuck at this point and bin trying sins friday (weekend I had not to work obviously)
P.S. am also using laravel, do I need something in the back-end?
P.S.S. My english is not the best, I know. If I need to explain more clear what my problem is then I will try my best to do that for you.
You could install CKeditor. You can download it from: https://ckeditor.com/ckfinder/download/
They have a Laravel package as well: https://github.com/ckfinder/ckfinder-laravel-package
I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code
#extends('layouts.app')
#section('content')
{{-- some html code --}}
<div class="row">
</div>
<div class="row">
<lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
{{-- more html code --}}
</div>
#endsection
<style type="text/css">
.dropdown, .dropdown-menu {
width: 100%;
}
</style>
#section('scripts')
// import the library here?
<script type="text/javascript">
let app = new Vue({
el: '#app',
data() {
return {
images : [
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
title : ''
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
title : ''
},
],
options : {
closeText : 'X'
}
};
},
mounted() {
},
});
</script>
#endsection
Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.
I am getting this error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the correct way of importing the library and then use it inside the blade template? Thanks!
Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.
So copy everything over to say, app.js, then include it via a script tag
Inside app.js you can import lightbox from 'vue-simple-lightbox'
Now, make sure you add it to your webpack.mix file through
.js('path/to/app.js', 'public/js/app.js')
That way the library will get compiled into the asset.
Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:
import Lightbox from 'vue-simple-lightbox'
export default {
components: {
Lightbox //HERE
},
...
You can import the file directly from GitHub:
<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>