Vue SFC support

Support for Vue SFC (Single File Components).

A Vue SFC is a file like the following:

<template>
  <div class="d-flex">Hello</div>
</template>
<script>
export default {}
</script>
<style>
.d-flex {
  display: flex;
}
</style>

As we can see, there’s a tag called style that can contain css and other pre-processors, such as scss.

The style tag accepts css code by default, or the extension specified by the lang attribute. Example:

<style lang="scss">
/* ... */
</style>

[paustint]

@MegaMattMiller - I have opened a PR that adds support for HTML/Vue/Svelte. Would you mind pulling the PR down and testing it to make sure it works? I am not a Vue developer, so I am not sure of all the patterns that are used aside from what I saw in the documentation.

PR: #21

If you are able to try it out, please let me know if you have any questions or find any issues.

Here was the file I used for testing

<template>
  <nav class="navbar navbar-light">
    <div class="container">
      <router-link class="navbar-brand" :to="{ name: 'home' }">conduit</router-link>
      <ul v-if="!isAuthenticated" class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
          <router-link class="nav-link" active-class="active" exact :to="{ name: 'home' }">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" active-class="active" exact :to="{ name: 'login' }">
            <i class="ion-compose"></i>Sign in
          </router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'RwvHeader',
  computed: {
    ...mapGetters(['currentUser', 'isAuthenticated'])
  }
};
</script>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

.button-close {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  margin: 1 0 0 0;
  padding: 2 0 0 0;
}
</style>

<!-- Using CSS modules -->
<style module>
.button {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

.buttonClose {
  background-color: red;
}
</style>

<style>
.c-Button {
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
}

.c-Button--close {
  background-color: red;
}
</style>

[Raathigesh]

This would be nice to have and should be fairly easy to do. If anybody wants to give it a shot, ping below and I’m more than happy to help.