1---
2category: '@RxJS'
3---
4 
5# useSubject
6 
7Bind an RxJS [`Subject`](https://rxjs.dev/guide/subject) to a `ref` and propagate value changes both ways.
8 
9## Usage
10 
11<!-- TODO: import rxjs error if enable twoslash -->
12 
13```ts no-twoslash
14import { useSubject } from '@vueuse/rxjs'
15import { Subject } from 'rxjs'
16 
17const subject = new Subject()
18 
19// setup()
20const subjectRef = useSubject(subject)
21 
22// Changes to subjectRef.value will be pushed to the subject
23subjectRef.value = 'new value'
24 
25// Values emitted by the subject will update subjectRef
26subject.next('from subject')
27```
28 
29### With BehaviorSubject
30 
31When using a `BehaviorSubject`, the returned ref is initialized with the subject's current value and the type does not include `undefined`:
32 
33```ts no-twoslash
34import { useSubject } from '@vueuse/rxjs'
35import { BehaviorSubject } from 'rxjs'
36 
37const subject = new BehaviorSubject('initial')
38 
39// setup()
40const subjectRef = useSubject(subject) // Ref<string>, not Ref<string | undefined>
41console.log(subjectRef.value) // 'initial'
42```
43 
44### Error Handling
45 
46If you want to add custom error handling to a Subject that might error, you can supply an optional `onError` configuration. Without this, RxJS will treat any error in the supplied observable as an "unhandled error" and it will be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in node).
47 
48```ts no-twoslash
49import { useSubject } from '@vueuse/rxjs'
50import { Subject } from 'rxjs'
51 
52const subject = new Subject()
53 
54// setup()
55const subjectRef = useSubject(subject, {
56  onError: (err) => {
57    console.log(err.message) // "oops"
58  },
59},)
60```
61 
62## Type Declarations
63 
64```ts
65export interface UseSubjectOptions<I = undefined> extends Omit<
66  UseObservableOptions<I>,
67  "initialValue"
68> {}
69export declare function useSubject<H>(
70  subject: BehaviorSubject<H>,
71  options?: UseSubjectOptions,
72): Ref<H>
73export declare function useSubject<H>(
74  subject: Subject<H>,
75  options?: UseSubjectOptions,
76): Ref<H | undefined>
77```
78