What Are Composables?

Nuxt3 solution for state management.

Why Use Composables?

They keep the state of your application intact.

How to make a Compasable:

  1. You need to make a "composables" directory in your nuxt3 applications root folder
  2. Place a *.ts file within the composables dir with a descriptive name starting with the word use: useResultState.ts etc...
  3. Now it's time to make your composables:
// useResultState.tsconst useResultState = () => {    const useIsDone = useState('isDone', () => false);        const setIsDone = (value: boolean) => {        useRefeshResults.value = value    }    return {        useIsDone,        setIsDone    }}export default useResultState

Notice how I used the name of the file as the states name.

  1. We are now ready to use the composable in a .vue file.
<script setup>    const {useIsDone, setIsDone} = useResultState();    setIsDone(false)    const useCountClicks = useState("isClicked", ()=> 0)     const setIsClicked = () => {        useCountClicks.value++                if(useCountClicks.value === 10){            setIsDone(true)        }    }</script><template>    <main>        <div @click=setIsClicked()>                    </div>        <div v-show="useIsDone">            <p>Done Clicking</p>        </div>            </main></template>
  1. We are all done now. You can see I added a local state also called 'isClicked' that calls setIsDone() at the appropriate time to true.

I hope you enjoyed my quick example of how to get started with gloabal and local state management in nuxt3!