Skip to content

Commit 5eca386

Browse files
committed
fix: Vue Readme
1 parent c245cf7 commit 5eca386

File tree

2 files changed

+24
-71
lines changed

2 files changed

+24
-71
lines changed

packages/vue/README.md

Lines changed: 23 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -9,84 +9,37 @@
99

1010
## Links
1111

12-
- [Official SDK Docs](https://docs.sentry.io/quickstart/)
12+
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)
1313
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
1414

1515
## General
1616

17-
This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in
18-
`@sentry/browser` can be imported from `@sentry/react`.
17+
This package is a wrapper around `@sentry/browser`, with added functionality related to VueJS. All methods available in
18+
`@sentry/browser` can be imported from `@sentry/vue`.
1919

20-
To use this SDK, call `Sentry.init(options)` before you mount your React component.
20+
To use this SDK, call `Sentry.init(options)` before you create a new Vue instance.
2121

2222
```javascript
23-
import React from 'react';
24-
import ReactDOM from "react-dom";
25-
import * as Sentry from '@sentry/react';
23+
import Vue from 'vue'
24+
import App from './App'
25+
import router from './router'
26+
import * as Sentry from '@sentry/vue'
2627

27-
Sentry.init({
28-
dsn: '__DSN__',
29-
// ...
30-
});
31-
32-
// ...
33-
34-
ReactDOM.render(<App />, rootNode);
35-
36-
// Can also use with React Concurrent Mode
37-
// ReactDOM.createRoot(rootNode).render(<App />);
38-
```
39-
40-
### ErrorBoundary
41-
42-
`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
43-
component tree to Sentry, and set a fallback UI. Requires React version >= 16.
44-
45-
> app.js
46-
```javascript
47-
import React from 'react';
48-
import * as Sentry from '@sentry/react';
28+
Vue.config.productionTip = false
4929

50-
function FallbackComponent() {
51-
return (
52-
<div>An error has occured</div>
53-
)
54-
}
55-
56-
class App extends React.Component {
57-
render() {
58-
return (
59-
<Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
60-
<OtherComponents />
61-
</Sentry.ErrorBoundary>
62-
)
63-
}
64-
}
65-
66-
export default App;
67-
```
68-
69-
### Profiler
70-
71-
`@sentry/react` exports a Profiler component that leverages the `@sentry/apm` Tracing integration to add React related
72-
spans to transactions. If the Tracing integration is not enabled, the Profiler component will not work. The Profiler
73-
tracks component mount, render duration and updates. Requires React version >= 15.
74-
75-
> app.js
76-
```javascript
77-
import React from 'react';
78-
import * as Sentry from '@sentry/react';
79-
80-
class App extends React.Component {
81-
render() {
82-
return (
83-
<FancyComponent>
84-
<InsideComponent someProp={2} />
85-
<AnotherComponent />
86-
</FancyComponent>
87-
)
88-
}
89-
}
30+
Sentry.init({
31+
Vue: Vue,
32+
debug: true,
33+
dsn: '__PUBLIC_DSN__',
34+
attachProps: true,
35+
})
36+
37+
/* eslint-disable no-new */
38+
new Vue({
39+
el: '#app',
40+
router,
41+
components: { App },
42+
template: '<App/>'
43+
})
9044

91-
export default Sentry.withProfiler(App);
9245
```

packages/vue/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"fix": "run-s fix:eslint fix:prettier",
5454
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
5555
"fix:eslint": "eslint . --format stylish --fix",
56-
"test": "jest",
56+
"test": "jest --passWithNoTests",
5757
"test:watch": "jest --watch",
5858
"pack": "npm pack"
5959
},

0 commit comments

Comments
 (0)