Support for custom tags? E.g. <i18n>.

[Deleted user]

I would like to use vue-i18n in single-file components and edit these files with vue-mode. An example file looks like this:

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>ja</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

Is it possible to tell vue-mode which mode to use within the <i18n>-tag? The documentation states: "The language type is the tag which this languge is valid under - one of template, script, or style.".

[Deleted user]

Should it work when I add this?: (:type i18n :name nil :mode js-mode)

[AdamNiederer]

Yup, that should do it.

[Deleted user]

It doesn't work for me.

Also, it's a bummer that it's not possible to choose something different than template, script, or style in via the customize-interface.

[AdamNiederer]

Hm, I've never used custom tags in vue-mode, actually. I'll take a look at it shortly, and add an option for custom tags in the customize menu.

[AdamNiederer]

I've tested it out, and you should be able to do it with a little customization. 5491a4a should make this customization a bit easier.

To make custom tags work in vue-mode:

• Pull the newest version of vue-mode (just to make it easier on you).
• Type M-x customize RET vue-modes RET.
• Scroll to the bottom of the list, and hit the INS button immediately below the list and above the State button. A new element should be added to the list.
• For the Language Type option, hit the Value Menu button and select Custom element type or 3.
• In the textbox after Custom element type, type i18n.
• Leave the Language Name option set to nil.
• Set the Submode to activate option to json-mode (or js-mode, or whatever. I'm assuming that's json).
• Type C-x C-s
• Restart emacs (kill the server if you have it running)
• Open your .vue file and make sure the desired mode is active within the element.

If you did everything correctly, this snippet should return t:

(equal (car (last vue-modes))
       '(:type i18n :name nil :mode json-mode))

and your customized vue-modes variable should look similar to this in your init.el:

 '(vue-modes
   (quote
    ((:type template :name nil :mode vue-html-mode)
     ;; more default modes...
     (:type style :name sass :mode ssass-mode)
     (:type i18n :name nil :mode json-mode))))

Feel free to re-open or file a new issue if you experience any further difficulties or have additional questions.

[Deleted user]

Thank you! :)