Verified Commit d8b0fd72 authored by Connor Shea's avatar Connor Shea 🏄

Add a working vue component.

parent e6d31d81
Pipeline #26350852 passed with stage
in 1 minute and 5 seconds
......@@ -9,6 +9,12 @@
<script src="<%= htmlWebpackPlugin.files.js %>"></script>
</head>
<body>
<pre id="output-json"></pre>
<h1>MDN BCD File Creator</h1>
<div class="json-structure"></div>
<pre class="output-json">
{{ output }}
</pre>
</body>
</html>
......@@ -7,6 +7,7 @@
"sass-loader": "^7.0.3",
"vue": "^2.5.16",
"vue-loader": "^15.2.6",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0"
},
......
<template>
<div>
<ul v-for="category in categories" :key="category.id">
<li> {{ category.name }} </li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
categories: [
{
id: "api",
name: "API"
},
{
id: "css",
name: "CSS"
},
{
id: "html",
name: "HTML"
},
{
id: "mathml",
name: "MathML"
},
{
id: "webextensions",
name: "WebExtensions"
}
]
}
},
methods: {
setCategory(category) {
console.log("test");
}
}
}
</script>
function initFileEditor() {
import Vue from 'vue';
import CompatData from './CompatData.vue';
window.onload = function() {
new Vue({
el: '.json-structure',
template: '<CompatData/>',
components: { CompatData }
})
}
console.log("test");
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
pre.output-json {
background-color: rgb(235, 235, 235);
border-radius: 2px;
padding: 5px;
font-family: monospace;
}
......@@ -2,6 +2,7 @@ const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: devMode ? 'development' : 'production',
......@@ -20,9 +21,15 @@ module.exports = {
filename: 'index.html',
template: __dirname + '/index.html',
inject: false
})
}),
new VueLoaderPlugin()
],
devtool: devMode ? "inline-source-map" : "source-map",
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
......@@ -32,6 +39,10 @@ module.exports = {
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
......
......@@ -909,6 +909,10 @@ date-now@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
......@@ -1590,7 +1594,7 @@ hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
he@1.1.x:
he@1.1.x, he@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
......@@ -3813,6 +3817,13 @@ vue-style-loader@^4.1.0:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-template-compiler@^2.5.16:
version "2.5.16"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
dependencies:
de-indent "^1.0.2"
he "^1.1.0"
vue-template-es2015-compiler@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment