+ Change this page by updating {{ `` }} in components/HelloWorld.vue.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/README.md b/src/components/README.md
new file mode 100644
index 0000000..d1dc92f
--- /dev/null
+++ b/src/components/README.md
@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+
+
+
+
+
+
+
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+
+
+
+
+
+
+
+```
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..a544ae9
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,23 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Styles
+import 'unfonts.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
diff --git a/src/plugins/README.md b/src/plugins/README.md
new file mode 100644
index 0000000..62201c7
--- /dev/null
+++ b/src/plugins/README.md
@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
diff --git a/src/plugins/index.js b/src/plugins/index.js
new file mode 100644
index 0000000..705f228
--- /dev/null
+++ b/src/plugins/index.js
@@ -0,0 +1,12 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+ app.use(vuetify)
+}
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..30a4980
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+ theme: {
+ defaultTheme: 'system',
+ },
+})
diff --git a/vite.config.mjs b/vite.config.mjs
new file mode 100644
index 0000000..52f4458
--- /dev/null
+++ b/vite.config.mjs
@@ -0,0 +1,53 @@
+// Plugins
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import Fonts from 'unplugin-fonts/vite'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ Vue({
+ template: { transformAssetUrls },
+ }),
+ // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+ Vuetify(),
+ Components(),
+ Fonts({
+ fontsource: {
+ families: [
+ {
+ name: 'Roboto',
+ weights: [100, 300, 400, 500, 700, 900],
+ styles: ['normal', 'italic'],
+ },
+ ],
+ },
+ }),
+ ],
+ optimizeDeps: {
+ exclude: ['vuetify'],
+ },
+ define: { 'process.env': {} },
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('src', import.meta.url)),
+ },
+ extensions: [
+ '.js',
+ '.json',
+ '.jsx',
+ '.mjs',
+ '.ts',
+ '.tsx',
+ '.vue',
+ ],
+ },
+ server: {
+ port: 3000,
+ },
+})