GitXplorerGitXplorer
T

vue-options-api-constants-plugin

public
5 stars
0 forks
1 issues

Commits

List of commits on branch main.
Verified
cac45f9cfdc8fd7aeeedc2538341de6f89e45fc3

Update README.md

TTheJaredWilcurt committed 6 months ago
Verified
a905d2952f66daa78d2e0875eefbd1c934050a7e

Update README.md

TTheJaredWilcurt committed a year ago
Verified
41253d20ae51d58be9b0b3ea5e4b294ec3c599e0

Update README.md

TTheJaredWilcurt committed a year ago
Verified
fb16c81a5c9194096198e3ca60872fd3728cad97

bump

TTheJaredWilcurt committed a year ago
Verified
4d4be2a882822dc1460d30c6519dd8a72d8cf9bf

Import App type

TTheJaredWilcurt committed a year ago
Verified
bef8073dbf240bb6bbbd5b7ee1a2a7ada86119b7

Update README.md

TTheJaredWilcurt committed a year ago

README

The README file for this repository.

Vue Options API Constants Plugin

Adds a constants section to your Options API components.

Under the hood the constants values are frozen (Object.freeze()) and returned as cached computed properties, accessible in the template.

Use

  1. npm install --save vue-options-api-constants-plugin
  2. Import the plugin into your main.js and then app.use it, like so: 
    import { createApp } from 'vue';
import constantsPlugin from 'vue-options-api-constants-plugin';

const app = createApp({});
app.use(constantsPlugin);
app.mount('#app');
  3. In any of your Options API components, you can now add a top level constants object, like so: 
    <template>
  <div>
    {{ BRAND_NAME }}
  </div>
</template>

<script>
import { BRAND_NAME } from './constants.js';

export default {
  name: 'AnExample',
  constants: {
    BRAND_NAME
  }
};
</script>

Use via CDN

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/vue-options-api-constants-plugin@1.0.0/cdn.js"></script>
  </head>
  <body>
    <div id="app">
      {{ AN_EXAMPLE }}
    </div>
    <script>
      const AN_EXAMPLE = 'An example';

      const app = Vue.createApp({
        constants: {
          AN_EXAMPLE
        }
      });
      app.use(window.constantsPlugin);
      app.mount('#app');
    </script>
  </body>
</html>

Benefits

  • The constants are frozen as computed properties under the hood, so you cannot mutate them, and if you attempt, you'll get a warning in the console.
  • Gives you separation of concerns and code organization by having a place for all constants to live in each component.

Why not use data, setup, computed or methods?

  • data and setup sections would create reactive and mutatable variables, which you don't want for your constants.
  • computed section works, but adds a lot of boilerplate that this plugin is abstracting away for you.
  • methods section would have the same boilerplate as the computed, and additional boilerplate in the template ({{ AN_EXAMPLE() }}) and in the scripts (this.AN_EXAMPLE())

Downsides

  • Ctrl+Click from the template to the defintion doesn't work with Intellisense/VSCode. However, this may be fixable with some editor hints, as other tools, like Vuelidate and Pinia don't have this issue. If you know how to fix this, create a PR.