vue-mode doesn't appear to work

[b-jazz]

I'm setting up spacemacs for the first time and vue-mode doesn't seem to be doing anything for me.

It seems to recognize the different sections of the .vue file and will say "vue(JavaScript)" while I'm in the <template> section and "vue(CSS)" while in the <style> section. But when I type if ( in the <template> section, the closing paren isn't automatically inserted like it is when I'm editing a .js file. Same thing goes for CSS in the <style> section. No completion. No formatting to speak of.

[AdamNiederer]

Hi, thanks for filing an issue. Could you post your installed versions of vue-mode, mmm-mode, and emacs as well?

But when I type if ( in the section, the closing paren isn't automatically inserted like it is when I'm editing a .js file.

Why are you trying to write JavaScript in the template section?

Same thing goes for CSS in the <style> section.

Could you post a snippet in which you observe this behavior, as well as the outcome you expected?

[b-jazz]

Emacs 25.1.1
mmm-mode 0.5.6
vue-mode.el Package-Version: 20180104.1611

[AdamNiederer]

Those versions look fine. Could you post a snippet in which you observe this behavior, as well as the outcome you expected?

[b-jazz]

I've been poking around a bit more with this and starting a spacemacs configuration completely from scratch to make sure I'm seeing something vanilla.

Here is what I see in my <style> section:

I expect it to behave more like editing a regular .css file like this:

The differences to note are the lack of an automatically inserted }, and the lack of the completions for display:inl.

As I've learned more over the last couple of days, I think this has something to do with the minor-modes that are enabled. I compared the ones that are enabled in Vue[CSS] mode when editing the .vue file and the ones enabled when editing a .css file. A few obvious differences in the minor modes that are enabled are Auto-Highlight-Symbol, Company, Highlight-Parentheses, and Smartparens.

Enabling Smartparens by hand will get me the automatic closing } in the example above. Enabling Company isn't getting me the pop-up with the completions though, so I'm not sure if that is the right minor mode to accomplish that or if it is another mode or just misconfigured Company settings somewhere.

Should vue-mode be turning on all of these minor modes for me, or is this something I need to tweak by hand?

[AdamNiederer]

Autocompletion with vue-mode can be finicky, but you should be able to set it up. I don't have CSS autocompletion configured, so I can't help you there, unfortunately. It should be doable with the right combination of company settings.

You can enable smartparens, company, etc. for all sub-regions by adding them to vue-mode-hook. You can also use mmm-mode's transition hooks to enable smartparens or company in specific code blocks, rather than the whole file. I've also heard reports of the lsp-vue package working, but I haven't tried to set it up.

Finally, if all else fails, you can use vue-mode-edit-indirect with your point over the region you wish to edit to edit it in a separate buffer with the correct major mode. That should give you a 1:1 experience.

[b-jazz]

Interesting. I was just trying to replicate the image in the repo's README.md so I assumed that you either had it all figured out, or it just worked out of the box.

Thanks for the quick turnaround. I'll keep poking.

[AdamNiederer]

Ah, yeah, that was taken by the original author of this package. I don't know what configuration he was using, unfortunately.

If you do get it working, send a PR or let me know and I'll add it to the README.

[begueradj]

Same here