Allow changing the language dynamically

[tk-subgenius]

Question

Hi everyone! Please question, I'd like to change the language (including quasar components) based on logged-in user attributes. I see there is ui.run(language='cs'), but how to change the language dynamically inside a page, after ui.run is called? I dug around some and saw one comment it's possible from user code, but not officially via platform APIs

[falkoschindler]

Hi @tk-subgenius,

There is, indeed, no official API for changing the language. Therefore I'll turn this question into a feature request. It would be nice if we could specify a list of languages like ui.run(languages=[...] and simply change them like app.set_language(...) or ui.set_language(...).

For now you can use the following workaround:

from nicegui import __version__, ui

ui.add_body_html(f'''
    <script src="/_nicegui/{__version__}/static/lang/de.umd.prod.js"></script>
    <script src="/_nicegui/{__version__}/static/lang/fr.umd.prod.js"></script>
    <script src="/_nicegui/{__version__}/static/lang/es.umd.prod.js"></script>
    <script src="/_nicegui/{__version__}/static/lang/zh-CN.umd.prod.js"></script>
''')

def switch_language(language_code: str) -> None:
    ui.run_javascript(f'''
        Quasar.lang.set(Quasar.lang["{language_code.replace('-', '')}"])
    ''')

ui.select(options={
    'de': 'Deutsch',
    'en': 'English',
    'fr': 'Français',
    'es': 'Español',
    'zh-CN': '中文',
}, value='en', on_change=lambda e: switch_language(e.value))

ui.date()

ui.run()

The date element is just for demonstrating the effect of the selected language.
Note that you need to load all language files first (e.g. via ui.add_body_html) before being able to use them.

[tk-subgenius]

Wow, thank you! (Also for the fast reply!) As a sidenote, I discovered nicegui a couple days ago, this is such an awesome project! I'm never going back to JS frontend frameworks again! :D

[falkoschindler]

By the way, if you want to set the language right when the page is loaded, you can put the Quasar.lang.set call right into the body HTML:

ui.link('/en-US', '/en-US')
ui.link('/de-DE', '/de-DE')
ui.link('/fr', '/fr')
ui.link('/es', '/es')
ui.link('/zh-CN', '/zh-CN')

@ui.page('/{language_code}')
def index(language_code: str):
    ui.label(f'language code: {language_code}')
    ui.add_body_html(f'''
        <script src="/_nicegui/{__version__}/static/lang/{language_code}.umd.prod.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {{
                Quasar.lang.set(Quasar.lang["{language_code.replace('-', '')}"])
            }})
        </script>
    ''')
    ui.date()

[tk-subgenius]

cool thank you again!