Skip to content

Commit cdc91b3

Browse files
ThomasArdalThomasArdal
committed
Added vue.js sample
1 parent 632010f commit cdc91b3

File tree

6 files changed

+110
-1
lines changed

6 files changed

+110
-1
lines changed

‎samples/Elmah.Io.JavaScript.VueJs/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Elmah.Io.JavaScript.VueJs
2+
3+
This sample is based on the `vue-20-markdown-editor` example code - one of many awesome samples made available by Vue.js here: https://github.com/vuejs/vuejs.org/tree/master/src/v2/examples

‎samples/Elmah.Io.JavaScript.VueJs/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Markdown Editor</title>
5+
<script src="https://unpkg.com/vue"></script>
6+
<script src="https://unpkg.com/marked@0.3.6"></script>
7+
<script src="https://unpkg.com/lodash@4.16.0"></script>
8+
<script src="https://cdn.jsdelivr.net/gh/elmahio/elmah.io.javascript@3.4.1/dist/elmahio.min.js" type="text/javascript"></script>
9+
<link rel="stylesheet" type="text/css" href="/style.css" />
10+
</head>
11+
<body>
12+
<div id="editor">
13+
<textarea :value="input" @input="update"></textarea>
14+
<div v-html="compiledMarkdown"></div>
15+
<!-- Trigger a Vue.js warning with this line -->
16+
<!--div v-html="invalid"></div-->
17+
</div>
18+
19+
<script>
20+
// Initialize the logger and subscribe to window.onerror
21+
var logger = new Elmahio({
22+
apiKey: "API_KEY",
23+
logId: "LOG_ID"
24+
});
25+
// Log errors from Vue.js to elmah.io
26+
Vue.config.errorHandler = function (err, vm, info) {
27+
logger.error(err.message, err);
28+
};
29+
// Log warnings from Vue.js to elmah.io
30+
Vue.config.warnHandler = function (msg, vm, trace) {
31+
logger.warning(msg);
32+
};
33+
new Vue({
34+
el: "#editor",
35+
data: {
36+
input: "# hello"
37+
},
38+
computed: {
39+
compiledMarkdown: function() {
40+
// Trigger a Vue.js error with this line
41+
//return x;
42+
return marked(this.input, { sanitize: true });
43+
}
44+
},
45+
methods: {
46+
update: _.debounce(function(e) {
47+
this.input = e.target.value;
48+
// Trigger a window.onerror with this line
49+
//throw new Error("Error in debounce");
50+
}, 300)
51+
}
52+
});
53+
</script>
54+
</body>
55+
</html>

‎samples/Elmah.Io.JavaScript.VueJs/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vue-20-markdown-editor",
3+
"version": "1.0.0",
4+
"description": "Dead simple Markdown editor.",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "serve"
8+
},
9+
"keywords": [],
10+
"license": "MIT",
11+
"devDependencies": {
12+
"serve": "^11.2.0"
13+
}
14+
}

‎samples/Elmah.Io.JavaScript.VueJs/sandbox.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"template": "static"
3+
}

‎samples/Elmah.Io.JavaScript.VueJs/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
html,
2+
body,
3+
#editor {
4+
margin: 0;
5+
height: 100%;
6+
font-family: "Helvetica Neue", Arial, sans-serif;
7+
color: #333;
8+
}
9+
10+
textarea,
11+
#editor div {
12+
display: inline-block;
13+
width: 49%;
14+
height: 100%;
15+
vertical-align: top;
16+
box-sizing: border-box;
17+
padding: 0 20px;
18+
}
19+
20+
textarea {
21+
border: none;
22+
border-right: 1px solid #ccc;
23+
resize: none;
24+
outline: none;
25+
background-color: #f6f6f6;
26+
font-size: 14px;
27+
font-family: "Monaco", courier, monospace;
28+
padding: 20px;
29+
}
30+
31+
code {
32+
color: #f66;
33+
}

‎samples/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ This directory contains samples to show how to integrate elmah.io from JavaScrip
88
* **Elmah.Io.JavaScript.AngularWebpack** - Integrate an Angular with Webpack application with elmah.io.javascript.
99
* **Elmah.Io.JavaScript.AspNetCore** - Integrate an ASP.NET Core application with elmah.io.javascript.
1010
* **Elmah.Io.JavaScript.Mvc** - Integrate an ASP.NET MVC application with elmah.io.javascript.
11-
* **Elmah.Io.JavaScript.React** - Integrate a React application with elmah.io.javascript.
11+
* **Elmah.Io.JavaScript.React** - Integrate a React application with elmah.io.javascript.
12+
* **Elmah.Io.JavaScript.VueJs** - Integrate a Vue.js application with elmah.io.javascript.

0 commit comments

Comments
 (0)