Upgrade to Vue 3 (WIP)

package.json

@@ -47,7 +47,7 @@
     "clipboard": "^2.0.10",
     "clone": "^2.1.2",
     "do-bulma": "github:do-community/do-bulma",
-    "do-vue": "github:do-community/do-vue",
+    "do-vue": "github:do-community/do-vue#MattIPv4/vue-3",
     "escape-html": "^1.0.3",
     "files-diff": "0.0.6",
     "json-to-pretty-yaml": "^1.2.2",
@@ -56,9 +56,9 @@
     "prismjs": "^1.27.0",
     "qs": "^6.10.3",
     "simple-js-sha2-256": "^1.0.7",
-    "vue": "^2.6.14",
+    "vue": "^3.2.31",
-    "vue-i18n": "^8.27.0",
+    "vue-i18n": "^9.1.9",
-    "vue-select": "^3.18.1",
+    "vue-select": "^4.0.0-beta.2",
     "webpack-require-from": "^1.8.6"
   },
   "devDependencies": {

src/nginxconfig/i18n/setup.js

@@ -24,12 +24,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-import Vue from 'vue';
+import { createI18n } from 'vue-i18n';
-import VueI18n from 'vue-i18n';
 import { defaultPack, defaultPackData, toSep, availablePacks } from '../util/language_packs';
 
-Vue.use(VueI18n);
-
 // Load in the full default pack
 const i18nPacks = {};
 i18nPacks[defaultPack] = defaultPackData;
@@ -57,7 +54,7 @@ export const getI18n = async () => {
     }
 
     // Store and return the i18n instance with the loaded packs
-    i18n = new VueI18n({
+    i18n = createI18n({
         locale: defaultPack,
         fallbackLocale: defaultPack,
         messages: i18nPacks,

src/nginxconfig/mount.js

@@ -26,16 +26,25 @@ THE SOFTWARE.
 
 // Load in the app
 import './scss/style.scss';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import './util/prism_bundle';
 import { getI18n } from './i18n/setup';
 import App from './templates/app';
 
 // Load the i18n languages and run the app
 getI18n().then(i18n => {
-    new Vue({
+    const app = createApp(App);
-        i18n,
+    app.use(i18n);
-        render: h => h(App),
+    app.mount('#app');
-    }).$mount('#app');
 });
 
+/*
+
+Vue 3 upgrade notes:
+
+- pretty-checkbox-vue is not compatible with Vue 3, find alternate solution for templates/inputs/(checkbox|radio).vue
+- Selecting a different language is not updating strings anywhere
+- Adding a second domain and reloading the page half loads the second domain settings
+  (tab + dupe warning show correct, but input shows incorrect and the dupe warning is showing)
+
+*/

src/nginxconfig/templates/app.vue

@@ -79,14 +79,13 @@ THE SOFTWARE.
                         </ul>
                     </div>
 
-                    <template v-for="data in activeDomains">
                     <Domain
+                        v-for="data in activeDomains"
                         :key="data[1]"
                         :ref="`domain-${data[1]}`"
                         :data="data[0]"
                         :style="{ display: data[1] === active ? undefined : 'none' }"
                     ></Domain>
-                    </template>
 
                     <h2>{{ $t('templates.app.globalConfig') }}</h2>
                     <Global :data="global"></Global>
@@ -100,8 +99,8 @@ THE SOFTWARE.
                 <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
-                        <template v-for="confContents in confFilesOutput">
                         <component
+                            v-for="confContents in confFilesOutput"
                             :is="getPrismComponent(confContents[0])"
                             :key="confContents[2]"
                             :name="confContents[0]"
@@ -109,7 +108,6 @@ THE SOFTWARE.
                             :half="Object.keys(confFilesOutput).length > 1 && !splitColumn"
                             @copied="codeCopiedEvent(confContents[3])"
                         ></component>
-                        </template>
                     </div>
                 </div>
             </div>

src/nginxconfig/templates/domain_sections/https.vue

@@ -232,11 +232,11 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
-    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import ExternalLink from 'do-vue/src/templates/external_link';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
+    import PrettyRadio from '../inputs/radio';
 
     const defaults = {
         https: {

src/nginxconfig/templates/domain_sections/logging.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -65,9 +65,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         accessLog: {

src/nginxconfig/templates/domain_sections/php.vue

@@ -192,10 +192,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import VueSelect from 'vue-select';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     // Value -> i18n key
     const serverOptions = {

src/nginxconfig/templates/domain_sections/python.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -86,9 +86,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         python: {

src/nginxconfig/templates/domain_sections/restrict.vue

@@ -208,9 +208,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         getMethod: {

src/nginxconfig/templates/domain_sections/reverse_proxy.vue

@@ -104,9 +104,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         reverseProxy: {

src/nginxconfig/templates/domain_sections/routing.vue

@@ -130,10 +130,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
-    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
+    import PrettyRadio from '../inputs/radio';
 
     const defaults = {
         root: {

src/nginxconfig/templates/domain_sections/server.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -148,9 +148,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         domain: {

src/nginxconfig/templates/global_sections/docker.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -81,10 +81,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
     import analytics from '../../util/analytics';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         dockerfile: {

src/nginxconfig/templates/global_sections/https.vue

@@ -242,11 +242,11 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
-    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import clone from 'clone';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
+    import PrettyRadio from '../inputs/radio';
 
     const ipType = {
         default: 'ipv4',

src/nginxconfig/templates/global_sections/logging.vue

@@ -165,9 +165,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         accessLog: {

src/nginxconfig/templates/global_sections/performance.vue

@@ -150,10 +150,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import ExternalLink from 'do-vue/src/templates/external_link';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         gzipCompression: {

src/nginxconfig/templates/global_sections/reverse_proxy.vue

@@ -144,9 +144,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyRadio from '../inputs/radio';
 
     const defaults = {
         proxyConnectTimeout: {

src/nginxconfig/templates/global_sections/security.vue

@@ -162,10 +162,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import VueSelect from 'vue-select';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         referrerPolicy: {

src/nginxconfig/templates/global_sections/tools.vue

@@ -146,12 +146,12 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import Modal from 'do-vue/src/templates/modal';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
     import shareQuery from '../../util/share_query';
     import analytics from '../../util/analytics';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         modularizedStructure: {

src/nginxconfig/templates/inputs/checkbox.vue

@@ -0,0 +1,8 @@
+<script>
+    // import PrettyCheckbox from 'pretty-checkbox-vue/check';
+
+    // export default PrettyCheckbox;
+
+    // TODO: pretty-checkbox-vue is not compatible with Vue 3
+    export default {};
+</script>

src/nginxconfig/templates/inputs/radio.vue

@@ -0,0 +1,8 @@
+<script>
+    // import PrettyRadio from 'pretty-checkbox-vue/radio';
+
+    // export default PrettyRadio;
+
+    // TODO: pretty-checkbox-vue is not compatible with Vue 3
+    export default {};
+</script>