Not really sure this is the best structure

package-lock.json

@@ -8294,6 +8294,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
+      "integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -37,7 +37,8 @@
     "do-vue": "git+https://github.com/do-community/do-vue.git",
     "parcel-bundler": "^1.12.4",
     "vue": "^2.6.11",
-    "vue-hot-reload-api": "^2.3.3"
+    "vue-hot-reload-api": "^2.3.3",
+    "vuex": "^3.3.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.9.0",

src/nginxconfig/templates/app.vue

@@ -26,21 +26,43 @@ limitations under the License.
             </template>
         </Header>
 
+        <div class="main container">
+            <Domain></Domain>
+        </div>
+
         <Footer :text="i18n.templates.app.oss"></Footer>
     </div>
 </template>
 
 <script>
+    import Vue from 'vue';
+    import Vuex from 'vuex';
     import i18n from '../i18n';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
+    import Domain from './domain';
+
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store({
+        state: {
+            domains: {},
+        },
+        mutations: {
+            setDomain(state, domain, data) {
+                state.domains[domain] = data;
+            },
+        },
+    });
 
     export default {
         name: 'App',
         components: {
+            Domain,
             Header,
             Footer,
         },
+        store,
         data() {
             return {
                 i18n,

src/nginxconfig/templates/domain.vue

@@ -0,0 +1,51 @@
+<!--
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+    <div>
+        <div class="tabs">
+            <ul>
+                <li v-for="tab in tabs" :class="tabName === tab ? 'is-active' : undefined">
+                    <a @click="setTab(tab)">{{ tab }}</a>
+                </li>
+            </ul>
+        </div>
+        <keep-alive>
+            <component :is="tabComponent" :ref="tabName"></component>
+        </keep-alive>
+    </div>
+</template>
+
+<script>
+    import * as Sections from './domain_sections';
+
+    export default {
+        name: 'Domain',
+        data() {
+            return {
+                tabName: Object.keys(Sections)[0],
+                tabComponent: Object.values(Sections)[0],
+                tabs: Object.keys(Sections),
+            };
+        },
+        methods: {
+            setTab(tab) {
+                this.$data.tabName = tab;
+                this.$data.tabComponent = Sections[tab];
+            },
+        },
+    };
+</script>

src/nginxconfig/templates/domain_sections/https.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world https</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainHTTPS',
+    };
+</script>

src/nginxconfig/templates/domain_sections/index.js

@@ -0,0 +1,8 @@
+export { default as Presets } from './presets';
+export { default as Server } from './server';
+export { default as HTTPS } from './https';
+export { default as PHP } from './php';
+export { default as Python } from './python';
+export { default as ReverseProxy } from './reverse_proxy';
+export { default as Routing } from './routing';
+export { default as Logging } from './logging';

src/nginxconfig/templates/domain_sections/logging.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world logging</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainLogging',
+    };
+</script>

src/nginxconfig/templates/domain_sections/php.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world php</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainPHP',
+    };
+</script>

src/nginxconfig/templates/domain_sections/presets.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world presets</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainPresets',
+    };
+</script>

src/nginxconfig/templates/domain_sections/python.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world python</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainPython',
+    };
+</script>

src/nginxconfig/templates/domain_sections/reverse_proxy.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world reverse proxy</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainReverseProxy',
+    };
+</script>

src/nginxconfig/templates/domain_sections/routing.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Hello world routing</div>
+</template>
+
+<script>
+    export default {
+        name: 'DomainRouting',
+    };
+</script>

src/nginxconfig/templates/domain_sections/server.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>Hello world server</div>
+</template>
+
+<script>
+    import Vue from 'vue';
+    import Vuex from 'vuex';
+
+    Vue.use(Vuex);
+
+    // Create the store of values
+    const store = new Vuex.Store({
+        state: {
+            path: {
+                default: '',
+            },
+            documentRoot: {
+                default: '',
+            },
+            wwwSubdomain: {
+                default: false,
+            },
+            cdnSubdomain: {
+                default: false,
+            },
+            redirectSubdomains: {
+                default: true,
+            },
+        },
+        mutations: {
+            setPath(state, value) {
+                state.path.value = value;
+            },
+            setDocumentRoot(state, value) {
+                state.documentRoot.value = value;
+            },
+            setWwwSubdomain(state, value) {
+                state.wwwSubdomain.value = value;
+            },
+            setCdnSubdomain(state, value) {
+                state.cdnSubdomain.value = value;
+            },
+            setRedirectSubdomains(state, value) {
+                state.redirectSubdomains.value = value;
+            },
+        },
+    });
+
+    // Set the values to defaults
+    Object.keys(store.state).forEach(key => {
+        store.state[key].value = store.state[key].value || store.state[key].default;
+    });
+
+    export default {
+        name: 'DomainServer',
+        store,
+        computed: {
+            ...Object.keys(store.state).reduce((prev, current) => {
+                prev[current] = {
+                    get () {
+                        return this.$store.state[current].value;
+                    },
+                    set (value) {
+                        this.$store.commit(`set${current.slice(0, 1).toUpperCase()}${current.slice(1)}`, value);
+                    },
+                };
+                return prev;
+            }, {}),
+        },
+    };
+</script>