fix reversed title bug

Author: r03ert0

src/components/pages/SettingsPage.vue

@@ -2,11 +2,12 @@
   <Wrapper>
     <Header>
       <span
+        ref="titleRef"
         contenteditable="true"
         @input="onTitleInput"
         placeholder="Enter a project name"
         :class="{ title: true, empty: !content || content.trim().length === 0 }"
-      >{{ content }}</span>
+      />
     </Header>
     <main>
       <Settings v-if="project != null" />
@@ -15,7 +16,7 @@
   </Wrapper>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 
 import Footer from '@/components/layout/Footer.vue';
 import Header from '@/components/layout/Header.vue';
@@ -44,6 +45,13 @@ if (props.files !== null) {
 }
 
 const content = ref(props.project.name);
+const titleRef = ref(null);
+
+onMounted(() => {
+  if (titleRef.value) {
+    titleRef.value.textContent = content.value || '';
+  }
+});
 
 const onTitleInput = (event) => {
   content.value = event.currentTarget.textContent;

vite.config.js

@@ -12,6 +12,7 @@ export default defineConfig({
     }
   },
   build: {
+    target: 'es2015',
     lib: {
       entry: path.resolve(__dirname, 'src/components/index.js'),
       name: 'nwl-components',