VueUse and VueJS OPTION API

This is my 7th write up on dev.to site. I have tried two functions - useStorage and useColorMode - and it works even with VueJS Option API. Source code of important parts as a simple example is included.

VueUse

VueUse is an library of functions, it covers a wide spectrum of useful enhancements for VueJS apps. It describes itself as a Collection of Vue Composition Utilities and it's documentation begins with VueUse is a collection of utility functions based on Composition API.
Since I have used VueJS from it's 1.x version, I still use as a developer of mobile apps Option API. Call me conservative person but I like it.

VueUSE + VueJS: useStorage, useColorMode

I show you a simple example of both functions on web/mobile app (HTML + CSS + JS).

First declare two objects outside of any VueJS app or component. OK, declaration doesn't look as an classic object, you can verify it by console.log(typeof state) and console.log(typeof colorMode) and it says object.

const state = VueUse.useStorage('state', 
  {age: 21, numbers: []}, 
  localStorage,
  {mergeDefaults: true}
);

const colorMode = VueUse.useColorMode({
  modes: {
    dark: 'dark',
    dim: 'dim',
    cafe: 'cafe',
  },
  attribute: 'theme',
});

Next step is to declare two variables inside Vue main app, both are assigned to above declared objects.

const app = Vue.createApp({
  template: "#main",
  data: function(){
    return {
      state: state,
      colorMode: colorMode,
    }
  },
...
});

Now I can use state.age and state.numbers (from first object, state) as persistent values. It means I can reload app, close it and open again and all data stored in state object (age, numbers) are loaded back from localstorage. For more information see documentation.

<label for="age">age: </label>
<input v-model="state.age" id="age" >
<p>You are {{state.age}} years old.</p>

The same is for colorMode object, it persist color mode of user's choice. Add simple button to your app, call function on click event and change actual color mode.

<button @click="changeTheme()">{{colorMode}}</button>

changeTheme: function(){
  var newTheme = "";

  if (this.colorMode == "light") newTheme = "dark";
  if (this.colorMode == "dark") newTheme = "dim";
  if (this.colorMode == "dim") newTheme = "cafe";
  if (this.colorMode == "cafe") newTheme = "light";

  this.colorMode = newTheme;
},

It works together with CSS rules:

[theme='dark'] {
  background: #252525;
  color: white;
}
[theme='dim'] {
  background: gray;
  color: white;
}
[theme='cafe'] {
  background: #c0acac;
  color: black;
}

And that's it. Simple example of VueUse with VueJS OPTION API. Hope this inspires you.