Vue Compose

This package was introduced to reduce the headache of unnecessary states by moving these states outside of the component and focus only on what the components are built for.

So what the hell does that mean in example?

Well, it means if you have a dialog/modal in your project this dialog certainly has state for opening/closing, composing the dialog title and action button, passing data when editing etc..

This package is here to make the life much easier by extracting these states, this is how.

Installation

Follow these steps to quickly install vue-use-compose into your project, in this example we're using npm.

npm install vue-use-compose

Quick Usage

Let's say we have a users list page and we have a nice button to create user and we have a child dialog, we want to open this dialog once we click the Create user button, let's give an example.

@/pages/users.vue

<template>
  ...
  <button @click="create('user')">Create user</button>
  ...

  <!-- Dialog for creating or editing the users -->
  <modal />
</template>

<script setup>
import { useCompose } from 'vue-use-compose'
import Modal from './Modal.vue'

const { create } = useCompose()
</script>

Let's define our dialog, and get the active state from defineCompose composable.

@/components/users/ManageDialog.vue

<template>
  <!-- For example we're using Vuetify dialogs -->
  <v-dialog :model-value="active">
    ...
  </v-dialog>
</template>

<script setup>
import { defineCompose } from 'vue-use-compose'

// defineCompose must take a unique identifier.
const { active } = defineCompose('user', {
  // 
})
</script>

That's it, we were able to open our dialog without the noise from the example below.

- import { ref } from 'vue'

- const isActive = ref(false)

- function setActive(state) {
-   isActive.value = state
- }

+ const { open, close } = useCompose()

Of course that's not everything! let's see a full example at the next section.

Advanced Usage

The useCompose composable provides a set of useful functions you can use to fully control the dialog/popup/sidebar without headache.

| Function | Description | Parameters | | ------------- | ------------- | --------- | | open | Setting active state with true | String id | | close | Setting active state with false | String id | | toggle | Switches open and close functions | String id | | create | Setting active state with true and marks creating state with true | String id, any? payload | | edit | Setting active state with true and marks updating state with true | String id, any? payload |

@/pages/users.vue

<template>
  ...
  <button @click="create('user')">Create user</button>
  ...

  ...
  <button @click="edit('user', USER_TO_EDIT)">Edit user</button>
  ...

  <!-- Dialog for creating or editing the users -->
  <modal />
</template>

<script setup>
import { useCompose } from 'vue-use-compose'
import Modal from './Modal.vue'

const { open, close, toggle, create, edit } = useCompose({
  detachOnClose: true, // Remove data when closing dialog in edit mode.
})
</script>

Now we can receive the payload passed to edit function very easily via data ref.

And we have access to a set of useful states we can rely on:

| State | Description | Default | | ---------- | ------------- | ----- | | active | Whether the it's open or closed | false | | creating | Whether it's marked as creating | true | | updating | Whether it's marked as updating | false | | data | The data that was passed to create or edit functions | null | | title | The composed title by default, it's composed of Create %name in creating and Edit %name in updating. | Create %, Edit % | | action | The action button of saving, by default, it's composed of Save in creating and Save changes in updating. | Save, Save changes |

@/components/users/ManageDialog.vue

<template>
  <v-dialog :model-value="active">
    <!-- prints the user, you can use this data to bind it to some form -->
    {{ data }}
  </v-dialog>
</template>

<script setup>
import { defineCompose } from 'vue-use-compose'

const { active, creating, updating, data, title, action } = defineCompose('user', {
  // Default options, feel free modify them, you may want to handle localization for example.
  createTitle: `Create %`,
  updateTitle: `Edit %`,
  createAction: 'Save',
  updateAction: 'Save changes',
})
</script>

Licence

vuecompose is released under the MIT License.