vue.jsvuejs3vue-i18n

How can I use special characters when using vue-i18n linked messages?


I'm using vue-i18n linked messages and I bumped into following error:

{
  person: {
    firstName: 'First name'
  },
  input: {
    placeholder: 'Insert @:person.firstName', // works. Prints "Insert First name"
    ex1: 'Lorem @:person.firstName, hello!', // doesn't work. Prints "Lorem , hello!"
    ex2: "Lorem '@:person.firstName'" // doesn't work. Prints "Lorem '"
  }
}

I tried checking the documentation, but I didn't find what I was looking for. What am I doing wrong?


Solution

  • From testing this issue, it seems linked messages will break if any characters are following it with no space in between. In ex1 the comma , following the linked message is the problem, and in ex2 the apostrophe ' is the same problem. There's an alternative syntax you can use for linked messages that avoids this issue:

    ex1: "Lorem @:{'person.firstName'}, hello!",
    ex2: "Lorem '@:{'person.firstName'}'",
    

    stackblitz example