I love Laravel localization because it is sample and straightforward, but i dont know how to integrate it whit Vue Components. Any help appreciated.
You can use vue-i18n:
$ npm install vue-i18n
Add it to you Vue app:
import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Just few tips for implementing Laravel resources json-files with Vue when using Vue 3 (as the implementation of vue-i18n is slightly different compared to Vue 2).
I used to use martinlindhe/laravel-vue-i18n-generator, but it has deprecated and hasn't been maintained for a while, so I upgraded my implementation by switching to https://github.com/rmariuzzo/Laravel-JS-Localization.
First I installed Laravel-JS-Localization just as shown at official documentation. This was straightforward. After this I generate JSON-file with:
php artisan lang:js --json resources\js\translations.json
... Please do note that I do not use default directory (/public) as output directory, because I want to bundle translations to Vue-application.
Next I modified my Vue-applications app.js entry point by adding following code before initializing application with createApp(...):
const translations = require('./translations.json');
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
locale: 'fi',
messages: {
fi: translations['fi.strings']
}
})
Remember to use i18n, so that you get translation-methods for templates
const app = createApp(...)
app.use(i18n);
In this example I'm loading Finnish translations, which originally reside at resources/lang/fi.json.
Now I'm able to call $t('Key to translation') within my component template, or this.$t(Key to translation') within logic.
Related
Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3
I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal
enter image description here
The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:
yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
or
npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
The Github README also describes how to use the library in a component which I've pasted below:
If using default options
<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>
OR if using custom default options
<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal';
const vScrollReveal = createScrollRevealDirective({
delay: 1000,
duration: 150,
});
</script>
I want to include beatiful flash messages to mey Laravel + Vue app, so I found a npm package on GitHub and installed this in my app (npm install)
I'm beginner in VueJs and I'm facing a problem: I just can't use the package in my vue components since it throw errors when I try to include this
What I use and what I get:
it's my app.js code
window.Vue = require('vue');
/*including the package*/
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage);
/*including the package*/
Vue.component('settings-form',require('./components/SettingsFormComponent.vue').default);
Vue.component('profile-nav',require('./components/ProfileNavComponent.vue').default);
const app = new Vue({
el: '#app',
});
What error I get using the code:
"TypeError: Cannot read property 'flashMessage' of undefined at app.js:1863"
I run this method (flashMessage) when I want to output a message:
Also I tried to use this code in my app.js to include the packange:
Vue.component('FlashMessage', require('#smartweb/vue-flash-message').default);
but it doesn't work too, it throws this error:
"Failed to mount component: template or render function not defined ..."
I'm trying to use my component that way (in ProfileNavComponent.vue):
<FlashMessage></FlashMessage>
Could you please tell me what the problem can be in?
thanks guys for any help)
I really appreciate this!
Im an author of this package. If you will have some issues with it, please leave the issue on github: https://github.com/smwbtech/vue-flash-message/issues
About your problem, I suppose that it is function context issue. Try to use arrow function as callback for .then
axios.post('/api/post/', body)
.then( res => {
this.flashMessage(/*your message*/);
this.data = '';/*other actions with your component data*/
})
.catch(e);
I usually use vue packages adding them from the name of the package, try:
import FlashMessage from 'vue-flash-message';
And when you want to use the component, try to use FlashMessage.show().
That's how I uncluded the package into my project
in app.js I added that code:
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage, {tag: 'flash-message', strategy: 'multiple'});
And then in any component I wanted to use flashMessages I used code like this:
this.flashMessage.success({
title: 'New Friend!',
message: data.user_created_by.full_name + ' started chatting with you!',
time: 5000,
blockClass: 'image-uploaded-flash',
});
Thanks a lot guys all who wanted to help me!!!
I have installd babel-polyfill using package.json (npm) in a laravel environment.
I am using vuetify to generate tables. However, when opening the page rendering the table in IE11 the table shows up but all the columns are gone (all columns are merged into one single column) and I cannot interact with the datatable (I have row click events which work fine in Chrome, Firefox and Edge). Do I need any additional polyfill packages?
Package.json:
"devDependencies": {
...
"babel-polyfill": "^6.26.0",
...
}
app.js:
import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'
window.Vue = require('vue');
Vue.use(vueResource);
Vue.use(Vuetify);
Thanks for any help!
EDIT: Turns out it was a bug. It seems to have been fixed in version 1.5.5.
As stated by Zach there is barely support for E11. Polyfill support is there but CSS support is lacking.
If you look at the browser statistics only a small number of people is still using it.
You should drop support if you are able.
Using new technology with a very old program tends to cause problems.
For new projects (use Vue CLI v3)
npm install #vue/cli -g
vue create my-app
vue add vuetify
For existing application:
npm install vuetify --save
Update the main.js as follows:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
You may also want to add the default styles:
// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
OR
// main.styl
#import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader
IE 11 and Safari 9 Support:
npm install babel-polyfill --save
You must then update the main.js as follows:
// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()
If your project doesnt already include the Babel preset-env, then you should add it as follows:
npm install #babel/preset-env --save-dev
and update .babelrc
// .babelrc
{
"presets": ["#babel/preset-env"]
}
Important Step:
Vue Cli v3 doesnt automatically bring in IE11 supports, so you will have to manually configure it to do so by manually adding transpileDependencies parameter in vue.config.js
// vue.config.js
module.exports = {
transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
}
That's it, it should work. Enjoy :)
Result:
Probably you set customProperties to true in the Vuetify theme options. It uses css-vars which are not implemented in IE 11. Hence no colors are shown. Setting the customProperties to false fixed a similar issue for me.
As we use BrowserModule for using ngModel in web area, and is imported by default while creating new ng app, what is the equivalent for this in NativeScript?
If you want to use ngModel to nativescript app, you could use NativeScriptFormsModule and import it to your app.module.ts as following:
import { NativeScriptFormsModule } from "nativescript-angular/forms"
you can check this link here
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>