The slides of my talk at VueJs Meetup Antwerp in March 2019. Want to check out the demo  https://github.com/katiasmet/vue-multilingual-example

1. Lunar
LAUNCHING EXPERIENCES

2. Multilingual
Vue apps
WITHOUT A PLUGIN

3. Who?

4. Who?
• Devine Alumni
• Creative developer @ Lunar
katiasmet.be
@KatiaSmet (Twitter - Codepen - GitHub)

5. Lunar
FULL SERVICE DIGITAL AGENCY THAT LAUNCHES EXPERIENCES

6. We accelerate brands and launch
experiences fueled by
creativity and technology.

7. Projects
PROJECTS OF LAST YEAR

8. • Lead Front-End Developer for Payroller
• Platform to create
and manage interim contracts
• First big Vue project of Lunar
• Vue / Laravel
• Scalable
• 1 year in development
Platforms
PAYROLLER

9. • stories.playmobil.com
• Interactive experience for children
• Vue
• GSAP
Digital experiences
A.K.A. THE FUNKY WEBSITES

10. Digital experiences
A.K.A. THE FUNKY WEBSITES
• lunar.be
• Our portfolio website
• Vue / Craft
• Combination with canvas

11. Technology stack
OUR ECOSYSTEM TO CREATE SOME LOVE ON THE WEB

12. Vue
• Main front-end framework
• Module based architecture
• Vuex

13. InuitCSS
• OOCSS framework
• Sass based
• Scalable

14. Vue - Laravel

15. Vue - Laravel
• For platforms
• For really custom stuff
• When the client doesn’t need a CMS

16. Vue - Craft

17. Vue - Craft
• For campaigns
• For content websites
• With Element API

18. What?

19. Imagine a client suddenly decides
they need a multilingual app.

21. There is no budget for
refactoring.

23. You don’t want to take
the risk to use a plugin.

25. Let’s go on an adventure.

27. How?

28. 1. Communication

30. Vuex?

32. A state manager to simplify
sharing data between components.

34. • Making translations available within the whole app
• Keeping track of your active language
• Easily switching a language
Why using a Vuex store?

35. JSON

36. State

37. Actions

38. 2. Navigation

40. How can you create
multilingual router paths?

41. With aliases!

42. A redirect means when the user visits /a,
and URL will be replaced by /b,
and then matched as /b.

43. An alias of /a as /b means
when the user visits /b, the URL remains /b,
but it will be matched as
if the user is visiting /a.

44. Router

45. Why using meta tags?

46. The alias array is not accessible
within the $route variable.

47. Router

48. Router

49. 3. Connection

50. First initialise your translations
in your default language.

51. Init

52. • Fetch the translations
• Switch the translations in the store
• Fallback if the current slug is not in the right language
Actions when
the language changes

53. Switch comp

54. Switch comp

55. • Check if the new language is different from the active language
• Check if the slug is in the right language
• Redirect if needed
Actions when
navigating to another page

56. App comp

57. App comp

58. 4. Usage

59. Usage

60. github.com/katiasmet/vue-multilingual-example

61. Want to join the team?

63. Lunar
LAUNCHING EXPERIENCES