chore: align Vue file conventions (#137)

- document Vue file authoring conventions
- rename runtime/example component files to kebab-case
- update imports and docs references

examples/basic-jsx/src/app.tsx

@@ -1,7 +1,7 @@
 import { shallowRef, defineComponent } from "vue";
 import { Box, Text, useInput } from "@vue-tui/runtime";
-import Counter from "./Counter";
-import Clock from "./Clock";
+import Counter from "./counter";
+import Clock from "./clock";
 
 export default defineComponent(() => {
   const showClock = shallowRef(true);
@@ -16,7 +16,7 @@ export default defineComponent(() => {
       <Text bold color="cyan">
         vue-tui basic (JSX)
       </Text>
-      <Text dimColor>Try editing Counter.tsx or App.tsx</Text>
+      <Text dimColor>Try editing counter.tsx or app.tsx</Text>
       <Text dimColor>Press c=toggle clock, q=quit</Text>
       <Text> </Text>
       <Counter />

examples/basic-jsx/src/main.tsx

@@ -1,4 +1,4 @@
 import { createApp } from "@vue-tui/runtime";
-import App from "./App";
+import App from "./app";
 
 createApp(App).mount();

examples/basic-template/src/app.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { shallowRef } from "vue";
 import { Box, Text, useInput } from "@vue-tui/runtime";
-import Counter from "./Counter.vue";
-import Clock from "./Clock.vue";
+import Counter from "./counter.vue";
+import Clock from "./clock.vue";
 
 const showClock = shallowRef(true);
 
@@ -15,7 +15,7 @@ useInput((input) => {
 <template>
   <Box backgroundColor="blue" borderStyle="round" width="20">
     <Text bold color="cyan">vue-tui basic (template)</Text>
-    <Text dimColor>Try editing Counter.vue or App.vue</Text>
+    <Text dimColor>Try editing counter.vue or app.vue</Text>
     <Text dimColor>Press c=toggle clock, q=quit</Text>
     <Text> </Text>
     <Counter />

examples/basic-template/src/main.ts

@@ -1,4 +1,4 @@
 import { createApp } from "@vue-tui/runtime";
-import App from "./App.vue";
+import App from "./app.vue";
 
 createApp(App).mount();

examples/coding-agent/src/app.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from "vue";
 import { Box, Text, Static, useInput, useApp } from "@vue-tui/runtime";
 import { runAgentLoop, type Message, type ToolCall } from "./agent";
-import MessageList from "./components/MessageList.vue";
+import MessageList from "./components/message-list.vue";
 
 type AppState = "idle" | "streaming" | "approving";
 

examples/coding-agent/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from "@vue-tui/runtime";
-import App from "./App.vue";
+import App from "./app.vue";
 
 if (!process.env["DEEPSEEK_API_KEY"]) {
   console.error("Error: DEEPSEEK_API_KEY environment variable is required.");

examples/flappy-bird/src/main.ts

@@ -5,6 +5,6 @@
 // Controls: space / ↑ / w to flap, q or Ctrl-C to quit, r to restart after dying.
 
 import { createApp } from "@vue-tui/runtime";
-import App from "./App.vue";
+import App from "./app.vue";
 
 createApp(App).mount();