Using vue-screen as plugin and accessing in composition API script

[21stcn]

Looking for some pointers for correct usage please.

I am using vue-screen as a plugin (as described in docs):

//plugins/screen.js

import VueScreen from "vue-screen";
import tailwindScreens from "#twcss/theme/screens";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueScreen, {
    grid: {
      base: "0px",
      ...tailwindScreens,
    },
  });
});

In this way I can access $screen and $grid within any template in the app, which is functioning as expected:

<button v-show="$grid.lg">Button</button>

How can I access $grid and $screen with this global configuration from within the composition api? For example:

const initHome = () => {
     
  if ($screen.touch){
    logic
  }
};

Is it necessary to use a composable (as described in docs) alongside the plugin config to use this single config in the script of every component? Ideally I would like to just configure the plugin and have $screen and $grid available in the composition api.

Thanks for your help!