assets folder and alias

.eslintrc.json

@@ -72,7 +72,7 @@
         "import/no-relative-packages": "error",
         "import/no-relative-parent-imports": [
             "error",
-            { "ignore": ["#[src,root,components,pages,plugins,context,types]/*"] }
+            { "ignore": ["#[src,root,components,pages,assets,plugins,context,types]/*"] }
         ],
         "import/no-self-import": "error",
         "import/no-unresolved": "error",

package.json

@@ -130,6 +130,7 @@
     "#src/*": "./src/*",
     "#components/*": "./src/components/*",
     "#pages/*": "./src/pages/*",
+    "#assets/*": "./src/assets/*",
     "#plugins/*": "./renderer/plugins/*",
     "#context/*": "./renderer/context/*",
     "#types/*": "./types/*"

renderer/_default.page.server.ts

@@ -1,7 +1,7 @@
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 
-import logoUrl from '#components/logo.svg'
+import logoUrl from '#assets/favicon.ico'
 
 import { createApp } from './app'
 

src/components/PageShell.vue

@@ -4,7 +4,7 @@
       <div class="layout">
         <div class="navigation">
           <a href="/" class="logo">
-            <img src="./logo.svg" height="64" width="64" alt="logo" />
+            <img :src="Logo" height="64" width="64" alt="logo" />
           </a>
           <VikeLink href="/">Home</VikeLink>
           <VikeLink href="/about">About</VikeLink>
@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import Logo from '#assets/it4c-logo2-clean-bg_alpha-128x128.png'
+
 import VikeLink from './VikeLink.vue'
 </script>
 

tsconfig.json

@@ -15,6 +15,7 @@
       "#src/*": ["./src/*"],
       "#components/*": ["./src/components/*"],
       "#pages/*": ["./src/pages/*"],
+      "#assets/*": ["./src/assets/*"],
       "#plugins/*": ["./renderer/plugins/*"],
       "#context/*": ["./renderer/context/*"],
       "#types/*": ["./types/*"]

vite.config.ts

@@ -26,6 +26,7 @@ const config: UserConfig = {
       '#src': path.join(__dirname, '/src'),
       '#components': path.join(__dirname, '/src/components'),
       '#pages': path.join(__dirname, '/src/pages'),
+      '#assets': path.join(__dirname, '/src/assets'),
       '#plugins': path.join(__dirname, '/renderer/plugins'),
       '#context': path.join(__dirname, '/renderer/context'),
       '#types': path.join(__dirname, '/types'),