1---
2category: Array
3---
4 
5# useArrayJoin
6 
7Reactive `Array.join`
8 
9## Usage
10 
11### Use with array of multiple refs
12 
13```ts
14import { useArrayJoin } from '@vueuse/core'
15 
16const item1 = ref('foo')
17const item2 = ref(0)
18const item3 = ref({ prop: 'val' })
19const list = [item1, item2, item3]
20const result = useArrayJoin(list)
21// result.value: foo,0,[object Object]
22item1.value = 'bar'
23// result.value: bar,0,[object Object]
24```
25 
26### Use with reactive array
27 
28```ts
29import { useArrayJoin } from '@vueuse/core'
30 
31const list = ref(['string', 0, { prop: 'val' }, false, [1], [[2]], null, undefined, []])
32const result = useArrayJoin(list)
33// result.value: string,0,[object Object],false,1,2,,,
34list.value.push(true)
35// result.value: string,0,[object Object],false,1,2,,,,true
36list.value = [null, 'string', undefined]
37// result.value: ,string,
38```
39 
40### Use with reactive separator
41 
42```ts
43import { useArrayJoin } from '@vueuse/core'
44 
45const list = ref(['string', 0, { prop: 'val' }])
46const separator = ref()
47const result = useArrayJoin(list, separator)
48// result.value: string,0,[object Object]
49separator.value = ''
50// result.value: string0[object Object]
51separator.value = '--'
52// result.value: string--0--[object Object]
53```
54 
55## Type Declarations
56 
57```ts
58export type UseArrayJoinReturn = ComputedRef<string>
59/**
60 * Reactive `Array.join`
61 *
62 * @see https://vueuse.org/useArrayJoin
63 * @param list - the array was called upon.
64 * @param separator - a string to separate each pair of adjacent elements of the array. If omitted, the array elements are separated with a comma (",").
65 *
66 * @returns a string with all array elements joined. If arr.length is 0, the empty string is returned.
67 *
68 * @__NO_SIDE_EFFECTS__
69 */
70export declare function useArrayJoin(
71  list: MaybeRefOrGetter<MaybeRefOrGetter<any>[]>,
72  separator?: MaybeRefOrGetter<string>,
73): UseArrayJoinReturn
74```
75