I am currently working on a personal project where I am experimenting with avoiding a full npm build process. Instead, I am trying to work within a single .html file that utilizes Vue 3 and Vuetify. Below is the complete HTML code which can be simply dropped into a file, opened in a browser, and provide a visual of what I am experiencing:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03757666776a657a43302d372d30">[email protected]</a>/dist/vuetify.min.css">
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"vuetify": "https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.4.3/vuetify.esm.min.js"
}
}
</script>
</head>
<body>
<div id="app">
<v-table>
<thead>
<tr>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="d in numbers" :key="d">
<td>{{ d }}</td>
</tr>
</tbody>
</v-table>
</div>
<script type="module">
import { createApp, ref } from 'vue'
import { createVuetify } from 'vuetify'
const vuetify = createVuetify()
const app = createApp({
setup() {
const numbers = ref([4, 5, 6])
return { numbers }
}
})
app.use(vuetify).mount('#app')
</script>
</body>
</html>
As I observe Vue initiating successfully and Vuetify assets being fetched correctly, an error appears in the console which seems to indicate a sequencing issue:
[Vue warn]: Property "d" was accessed during render but is not defined on instance.
at <VTable>
at <App>
My assumption is that the template attempts to render before the setup() script populates data. Is it possible for me to achieve what I am aiming for?
Another observation is that when I forego using data and instead create a basic table with v-table, like so:
<v-table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
</tr>
</tbody>
</v-table>
The rendered output is simply
<table> Col 1 Col 2 R1C1 R1C2 </table>v-table component.