diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..92acf04 --- /dev/null +++ b/example/README.md @@ -0,0 +1,7 @@ +To run this example please run + +``` +npm install +``` + +To install VueJS which is a dependency. Thank you :) \ No newline at end of file diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..69f4512 --- /dev/null +++ b/example/index.html @@ -0,0 +1,80 @@ + + + + Vue Translate Test Page + + + + + + +
+ + + \ No newline at end of file diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..2fb89a4 --- /dev/null +++ b/example/package.json @@ -0,0 +1,15 @@ +{ + "name": "susana", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "vue": "^2.0.0-rc.3", + "vue-translate-plugin": "^1.0.0" + } +} diff --git a/example/script.js b/example/script.js new file mode 100644 index 0000000..204403e --- /dev/null +++ b/example/script.js @@ -0,0 +1,103 @@ +Vue.use(VueTranslate); + +Vue.component('sample-header', { + name: 'sample-header', + + locales: { + es_DO: { + 'Welcome to Vue Translate!': 'Bienvenido a Vue Translate!', + 'Try changing the language to': 'Prueba cambiando el idioma a', + 'English': 'Inglés', + 'Spanish': 'Español' + } + }, + + methods: { + setLang(lang) { + this.$translate.setLang(lang); + } + }, + + template: `
+
+ +
+
+ {{ t('Try changing the language to') }}: + English + Spanish +
+
` +}); + +Vue.component('sample-content', { + name: 'sample-content', + + locales: { + es_DO: { + 'Hello there!': 'Hola!', + 'While this, is.': 'Mientras que este, si.', + 'Reactivity': 'Reactividad', + 'And it\'s completely reactive, let\'s try with dynamic content!': 'Y es completamente reactivo, probemos con contenido dinámico!', + 'Or even computed properties.': 'O incluso con propiedades computadas.', + '(Remember to change the language to spanish to see the translations)': '(Reacuerda cambiar el idioma a inglés para que veas la traducción)', + 'hello world': 'hola mundo', + 'Hello world': 'Hola mundo', + 'Hello World': 'Hola Mundo', + 'HELLO WORLD': 'HOLA MUNDO', + } + }, + + data() { + return { + sampleInput: '', + computedInput: '' + }; + }, + + computed: { + translatedInput() { + return this.t(this.computedInput); + } + }, + + template: `
+

Hello there!

+

This text is not being translated.

+

While this, is.

+ +

Reactivity

+ +
+ + (Remember to change the language to spanish to see the translations) + + +
+ +
{{ t(sampleInput) }}
+ +
+ + (Remember to change the language to spanish to see the translations) + + +
+ +
{{ translatedInput }}
+
` +}) + +new Vue({ + + created() { + this.$translate.setLang('en_US'); + }, + + template: `
+ Welcome to Vue Translate! + + +
` + +}).$mount('#app'); \ No newline at end of file