use vetur for files with extention other than .vue

[lzl124631x]

I want to use vetur for files with extension .wpy instead of .vue. How to achieve this?

[jasonlyu123]

https://code.visualstudio.com/docs/languages/identifiers

Follow the files.associations example here

[lzl124631x]

@jasonlyu123 Thanks. But I have that already I think?

Updated the screenshot. As you can see, Vetur is working but complaining my legit vue content.

[jasonlyu123]

Oh sorry jumped to the conclusion too fast. There's some code using the .vue extension to check if a file is a vue file or ts/js files. Those need to be modified to allow a non-vue extension.
for example:

vetur/server/src/services/typescriptService/serviceHost.ts

Line 301 in 7cf0b97

if (isVueFile(fileName)) {

The code here is used to tell typescript how to process the code. Maybe we can add a user config for other extensions.

On another note, maybe you can jump into it and try to implement it yourself. I am not a core maintainer but I think maybe this way it would have more chances to happens.

[lzl124631x]

@jasonlyu123 Do you mean adding a new config entry in vetur.config.js? Something like the following?

settings: {
  extensions: [".wpy"]
}

[lzl124631x]

A rough PR for it https://github.com/vuejs/vetur/pull/2759/files

Haven't updated doc yet.

[yoyo930021]

#1616 (comment)
#2573 (comment)

We have refused to do this before
But I'm not sure if there's a deeper reason.

[lzl124631x]

I frankly don't think it's a good idea to limit Vetur to .vue files. There are variants of files using vue syntax but with other extention names. The one I'm using is .wpy (wepy) which uses vue syntax but is targeting WeChat App. Apparently there are other cases as well for example the one mentioned in #1616. I don't see #2573 (comment) as related because that specific to file associations.

I was using Vetur for .wpy fine before 0.22.4 (including) #1491. I don't see benefit of limiting to .vue file.

[lzl124631x]

Ping.

[yoyo930021]

I will ask @octref about this question.

[lzl124631x]

@yoyo930021 sorry to bother. Any updates? Thanks.

[mashirozx]

I frankly don't think it's a good idea to limit Vetur to .vue files. There are variants of files using vue syntax but with other extention names. The one I'm using is .wpy (wepy) which uses vue syntax but is targeting WeChat App. Apparently there are other cases as well for example the one mentioned in #1616. I don't see #2573 (comment) as related because that specific to file associations.

I was using Vetur for .wpy fine before 0.22.4 (including) #1491. I don't see benefit of limiting to .vue file.

Also need support for .nvue (native vue)

[yoyo930021]

@lzl124631x @mashirozx
What are they different without file extensions?
Why do they use different file extensions?

The purpose of this project is Vue SFC support.
We don't have enough time to maintenance other frameworks.
If their spec is the same as Vue SFC spec, we probably accept them.

If not, I would suggest you fork the project for their own support.

[mashirozx]

@yoyo930021 Uni-app is a Vue based app development framework, just like React Native. Sorry I can't find their English docs, but it's really popular in China.

There can be .vue and .nvue files in a uni-app project. The .vue file goes into a webview based Vue compiler, and the .nvue file goes into native based weex compiler.

The .nvue file does follow the Vue SFC.

[lzl124631x]

@yoyo930021

Why do they use different file extensions?

Vue syntax is not necessarily used for only web development. Take WeChat App for example, there are several frameworks using Vue syntax but they are not targeting web browser, nor use .vue extention.

• wepy is using .wpy. See code sample in doc
• mpx is using .mpx. Example

They are using Vue SFC syntax.

We don't have enough time to maintenance other frameworks.

Absolutely understandable. They are just vue variants. If Vetur doesn't support some of their special requirements, I absolutely agree that we don't need to support that -- we should only focus on Vue SFC itself.

But just allowing Vetur to do syntax highlighting can benefit lots of those devs using those Vue variants. The investment for us would be minimal, just allowing them to configure the supported file extentions. And the return is way greater -- all those devs will appreciate it.

[yoyo930021]

@mashirozx @lzl124631x
I can read Chinese, so I read all the framework documents.

Uni-app is based on Vue and explicitly conforms to Vue SFC spec in their document.
I will consider accepting PR, but we don't maintain different Vue parts.
I will indicate this in the document and close the invalid issue.

wepy is using .wpy. See code sample in doc
mpx is using .mpx. Example

In their document, it is only a framework and like Vue syntax. Ref: 类 Vue 开发风格
There is a big gap in many parts of the actual.
I don't think vetur can provide any practical help.

But just allowing Vetur to do syntax highlighting can benefit lots of those devs using those Vue variants. The investment for us would be minimal, just allowing them to configure the supported file extentions. And the return is way greater -- all those devs will appreciate it.

If you only want syntax highlighting, you can copy vue syntax highlighting and open a new project.
Here: https://github.com/vuejs/vetur/tree/master/syntaxes

Or set files.associations in vscode, syntax highlighting is work in vetur.
Maybe try https://github.com/znck/vue-developer-experience/tree/main/extensions/vscode-vue

[mashirozx]

@yoyo930021 Thank you！

[lzl124631x]

@yoyo930021 Thanks for the recommendations.

Or set files.associations in vscode, syntax highlighting is work in vetur.

I've set this one so the Vetur is "working" on my wpy file. However, it shows error all over the place (as you can see in the first screenshot). Is it a bug?

[yoyo930021]

@yoyo930021 Thanks for the recommendations.

Or set files.associations in vscode, syntax highlighting is work in vetur.

I've set this one so the Vetur is "working" on my wpy file. However, it shows error all over the place (as you can see in the first screenshot). Is it a bug?

Close all validation.

[phil294]

FYI I recently did this in a (albeit highly customized) fork of Vetur here and here: Going from hard-coded .coffee (already externalized to FILE_EXTENSION to accepting DEFAULT_FILE_EXTENSION and any more file extensions the user might want. I added get_file_extensions to EnvironmentService, which integrates files.associations. A problem here is: tsserver serviceHost needs unambiguous extensions, but VSCode files.associations allows for more complicated glob patterns. I solved this by omitting all associations that don't match exactly /^\*\.[a-zA-Z_0-9-]+$/. I think this is reasonable, as *.custom-ext will be the pattern that the vast majority of people use, and it's suggested by vscode settings this way.
Maybe this helps if someone ever wants to tackle this issue.