DEV Community

Pavel Kříž
Pavel Kříž

Posted on

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',
});
Enter fullscreen mode Exit fullscreen mode

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,
    }
  },
...
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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;
},
Enter fullscreen mode Exit fullscreen mode

It works together with CSS rules:

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

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

Top comments (0)