Add base VueJS configuration

.gitignore

@@ -27,20 +27,27 @@ venv/
 ENV/
 env.bak/
 venv.bak/
+node_modules
 
-# Spyder project settings
+# Editor directories and files
+.ropeproject
 .spyderproject
 .spyproject
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# Rope project settings
-.ropeproject
-
-# PyCharm project settings
-.idea/
+# Do not pin versions
+yarn.lock
 
 # Django statics
 static_files/
 static/logo/
+static/bundles/
 
 # re2o specific
 settings_local.py

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "re2o",
+  "private": true,
+  "repository": "git@gitlab.federez.net:re2o/re2o.git",
+  "license": "GPL-3.0+",
+  "scripts": {
+    "build": "vue-cli-service build --inline-vue --target wc-async 'static/components/*.vue'",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack-bundle-tracker": "^1.0.0-alpha.1"
+  },
+  "babel": {
+    "presets": [
+      "@vue/cli-plugin-babel/preset"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

static/components/HelloWorld.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="hello">
+    <h3>
+      Hello World from Re2o VueJS
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld"
+};
+</script>
+
+<!-- Add "scoped" attribute to limit SCSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+</style>

static/components/HelloWorld2.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="hello">
+    <h3>
+      One Hello World wasn't enough :p
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld"
+};
+</script>
+
+<!-- Add "scoped" attribute to limit SCSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+  background-color: #ff0000;
+}
+</style>

vue.config.js

@@ -0,0 +1,23 @@
+/**
+ * Re2o VueJS configuration
+ * 
+ * Each VueJS components in static/components are compiled into asynchronous
+ * chunks in static/bundles.
+ * Then you can use for exemple <re2o-hello-world></re2o-hello-world> to call
+ * the HelloWorld component.
+ */
+
+const BundleTracker = require("webpack-bundle-tracker");
+
+module.exports = {
+    // Output to Django statics
+    outputDir: './static/bundles/',
+
+    // Customize Webpack    
+    chainWebpack: config => {
+        // Create file for django-webpack-loader
+        config
+            .plugin('BundleTracker')
+            .use(BundleTracker, [{ filename: './webpack-stats.json' }])
+    }
+};