Skip to content

Commit f16fec4

Browse files
committed
Add Vue plugin docs
1 parent 10a675f commit f16fec4

File tree

1 file changed

+87
-0
lines changed

1 file changed

+87
-0
lines changed

docs/integrations/vue.rst

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
Vue.js (2.0)
2+
============
3+
4+
To use Sentry with your Vue application, you will need to use both Raven.js (Sentry's browser JavaScript SDK) and the Raven.js Vue plugin.
5+
6+
On its own, Raven.js will report any uncaught exceptions triggered from your application. For advanced usage examples of Raven.js, please read :doc:`Raven.js usage <../usage>`.
7+
8+
Additionally, the Raven.js Vue plugin will capture the name and props state of the active component where the error was thrown. This is reported via Vue's `config.errorHandler` hook.
9+
10+
Installation
11+
------------
12+
13+
Raven.js and the Raven.js Vue plugin are distributed using a few different methods.
14+
15+
Using our CDN
16+
~~~~~~~~~~~~~
17+
18+
For convenience, our CDN serves a single, minified JavaScript file containing both Raven.js and the Raven.js Vue plugin. It should be included **after** Vue, but **before** your application code.
19+
20+
Example:
21+
22+
.. sourcecode:: html
23+
24+
<script src="http://builds.emberjs.com/tags/v2.3.1/ember.prod.js"></script>
25+
<script src="https://cdn.ravenjs.com/3.4.1/vue/raven.min.js"></script>
26+
<script>Raven.config('___PUBLIC_DSN___').install();</script>
27+
28+
Note that this CDN build auto-initializes the Vue plugin.
29+
30+
Using package managers
31+
~~~~~~~~~~~~~~~~~~~~~~
32+
33+
Pre-built distributions of Raven.js and the Raven.js Vue plugin are available via both Bower and npm for importing in your ``ember-cli-build.js`` file.
34+
35+
Bower
36+
`````
37+
38+
.. code
39+
40+
.. code-block:: sh
41+
42+
$ bower install raven-js --save
43+
44+
.. code-block:: javascript
45+
46+
app.import('bower_components/raven-js/dist/raven.js');
47+
app.import('bower_components/raven-js/dist/plugins/vue.js');
48+
49+
.. code-block:: html
50+
51+
<script src="assets/vendor.js"></script>
52+
<script>
53+
Raven
54+
.config('___PUBLIC_DSN___')
55+
.addPlugin(Raven.Plugins.Vue)
56+
.install();
57+
</script>
58+
<script src="assets/your-app.js"></script>
59+
60+
npm
61+
````
62+
63+
.. code-block:: sh
64+
65+
$ npm install raven-js --save
66+
67+
.. code-block:: javascript
68+
69+
app.import('bower_components/raven-js/dist/raven.js');
70+
app.import('bower_components/raven-js/dist/plugins/vue.js');
71+
72+
.. code-block:: html
73+
74+
<script src="assets/vendor.js"></script>
75+
<script>
76+
Raven
77+
.config('___PUBLIC_DSN___')
78+
.addPlugin(Raven.Plugins.Vue)
79+
.install();
80+
</script>
81+
<script src="assets/your-app.js"></script>
82+
83+
These examples assume that Vue is exported globally as ``window.Vue``. You can alternatively pass a reference to the ``Vue`` object directly as the second argument to ``addPlugin``:
84+
85+
.. code-block:: javascript
86+
87+
Raven.addPlugin(Raven.Plugins.Vue, Vue);

0 commit comments

Comments
 (0)