Using vue-screen as plugin and accessing in composition API script about vue-screen HOT 4 CLOSED

Not sure if the correct approach but using a composable to use screen and grid within script setup logic.

//composables/useVueScreen.js

import { useScreen, useGrid } from "vue-screen";
import tailwindScreens from "#twcss/theme/screens";

export const screen = useScreen();
export const grid = useGrid({
  base: "0px",
  ...tailwindScreens,
});

Slight redundancy redefining grid (as also done in the plugin) but working.

from vue-screen.

Hi @21stcn
Your second approach is preferred when using the composition API, you can find an example here https://reegodev.github.io/vue-screen/guide/examples/shared-config.html

If you really want to use the plugin version, you can access the global properties in a component directly in the template:

<script setup>

</script>

<template>
<p>{{ $screen }}</p>
<p>{{ $grid }}</p>
</template>

or if you need to access them in the component logic, you can use getCurrentInstance:

import { getCurrentInstance } from 'vue'
<script setup>
const internalInstance = getCurrentInstance()

console.log({
  screen: internalInstance.appContext.config.globalProperties.$screen,
  grid: internalInstance.appContext.config.globalProperties.$grid,
});
</script>

Although with this method, properties won't be reactive. getCurrentInstance has been removed from Vue docs since I initially wrote the docs, I need to publish a new version with a different approach

from vue-screen.

Ok perfect. Thanks very much for the explanation. I'll use the composable approach.

Thanks!

from vue-screen.

With version 2.4.0 you can also use inject to obtain the screen and grid properties when using the plugin configuration.
https://reegodev.github.io/vue-screen/guide/configuration/plugin.html#using-screen-and-grid-properties-in-your-components

from vue-screen.