Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feature request] Vue.js syntax + structure detection within web-mode HTML files #13445

Closed
stradicat opened this issue Apr 2, 2020 · 4 comments
Closed

[feature request] Vue.js syntax + structure detection within web-mode HTML files #13445

stradicat opened this issue Apr 2, 2020 · 4 comments
Labels
HTML Vue

Comments

@stradicat
Copy link
Contributor

stradicat commented Apr 2, 2020 •
edited
Loading

I've been happily using the html layer for web development, and now I'm delving into Vue.js work, so I've added the vue layer.

It works nicely when editing .vue files generated by vue create on the console.
However, when adding Vue components to a static .html file, Vue syntax is not properly detected: <script> code doesn't get autocompleted / corrected, etc.; only html is properly handled.

I can invoke vue-mode while having the .html file open, and all components are properly handled in their own contexts: <body>, <script>, style.
But when trying to navigate / highlight the html structure, there are minor annoyances: opening / closing tags highlight (<div> </div> aren't highlighted), javascript code autocompletion (e.g. document.getElementById).

I'm asking or looking for way to invoke vue-mode as a minor mode within web-mode, so that opening a .html file with Vue components gets properly handled.
As far as the Spacemacs documentation goes for the development branch, the vue layer doesn't use vue-mode from https://github.com/AdamNiederer/vue-mode : "this layer creates a derived mode called vue-mode on the fly out of web-mode to handle vue files".

The above described behavior can be tested with Spacemacs develop, enabling the html, vue and lsp layers:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <h1>Favorite Color App</h1>
      <div>
        <h2>Show me my Favorite color</h2>
        <button v-on:click="showColor">Click me!</button>
      </div>

      <div>
        <h2>Change my favorite color: {{favoriteColor}}</h2>
        <label for="change-color">Change color</label>
        <!-- Switching from `v-on` / `@` to `v-model` -->
        <!-- <input id="change-color" type="text" @keyup.enter="changeColor" /> -->
        <input id="change-color" type="text" v-model="favoriteColor" />
      </div>
    </div>

    <div id="test-app">
      <label for="un">Username</label>
      <input id="un" type="text" v-model="username" />
      <label for="pw">Password</label>
      <input id="pw" type="password" v-model="password" />
    </div>
  </body>

  <script>
      let app = new Vue({
        el: "#app",
        data: {
          favoriteColor: "blue"
        },
        methods: {
          changeColor() {
            this.favoriteColor = document.getElementById("change-color").value;
          },
          showColor() {
            alert(this.favoriteColor);
          }
        }
      });

    let testApp = new Vue({
      el: #test-app,
      data: {
        username: '',
        password: ''
      }
    });
  </script>
</html>

You can save the code above as index.html for testing purposes.
@github-actions
Copy link

github-actions bot commented Apr 6, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!

@github-actions github-actions bot added the stale marked as a stale issue/pr (usually by a bot) label Apr 6, 2021
@lebensterben lebensterben added Help wanted and removed stale marked as a stale issue/pr (usually by a bot) labels Aug 24, 2021
@lebensterben lebensterben reopened this Aug 24, 2021
@stradicat
Copy link
Contributor Author

I haven't done Vue work in about a year, but I'll test again next week to see if the issue persists.

@lebensterben
Copy link
Collaborator

no worry I will keep this issue open.

@stradicat
Copy link
Contributor Author

All elements inside <script> tags are being properly handled nowadays.

Therefore, I'm closing the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML Vue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lebensterben @duianto @stradicat