feat(framework/vue): framework support for Vue.js #464

linbingquan · 2022-05-03T23:59:02Z

Related issue: #461

TODO

support the framework routing
useData hook
Head component
Link component

ije · 2022-05-04T13:30:17Z

Hi, this looks great! i already implemented the vue sfc loader, now we need to implement the framework part.

there are a couple of things we need to add:

<App>/<Router> support the fs routing
useData hook to allow fetch server data
<Head> component for SEO meta
<Link>/<NavLink> component to link between pages in the client

<!-- ./routes/index.vue -->

<script>
// this will be striped in client
export const data = {
  get: () => {
    return new Response(JSON.stringify({ ... }))
  }
}
</script>

<script setup>
import { Head, Link, useData } from "aleph/vue"
const { data } = await useData()
</script>

<template>
  <Head>
    <title>Page</title>
  </Head>
  <p>Page data: {{ data }}</p>
  <Link to="/blog">Blog</Link>
</template>

linbingquan · 2022-05-04T21:18:45Z

@ije Thank you for your reply, I think I was done with Link and Router feature, it can work. TBH, I am not 100% sure I was done those.

ije · 2022-05-06T13:16:23Z

CONTRIBUTING.md

@@ -30,6 +32,19 @@ deno task start examples/react-app
 deno task build examples/react-app
 ```

+### vue-app


framework/vue/data.ts

framework/vue/router.ts

examples/vue-app/routes/todos.vue

ije · 2022-05-06T13:31:18Z

nice, you have good taste!

linbingquan · 2022-05-06T21:05:04Z

I found framework/react and framework/vue render same view in different brower, it does not support multiple client user (Chinese English), it means framework doesn't have session user, maybe it can call some terminology, but I don't know. TBH, I am not good at SSR enough. I am not sure it's easily to support, whether it should be supported.

ije · 2022-05-06T21:18:16Z

I found framework/react and framework/vue render same view in different brower, it does not support multiple client user (Chinese English), it means framework doesn't have session user, maybe it can call some terminology, but I don't know. TBH, I am not good at SSR enough. I am not sure it's easily to support, whether it should be supported.

check https://dash.deno.com, it is built by aleph/react, support session/i18n is not hard although, i will add an auth middleware later

linbingquan · 2022-05-06T21:27:38Z

@ije I found your code with more detail, like <Link />/<NavLink />, I am not sure this PR can be approval. I just can coding what I can understand with your code of framework/react... Can you tell me what should I do by next step.

linbingquan · 2022-05-06T21:38:08Z

check https://dash.deno.com, it is built by aleph/react, support session/i18n is not hard although, i will add an auth middleware later

Thank you for your reply. I was wonder how it works deno deploy by what framework, awesome aleph/react.

linbingquan · 2022-05-07T23:34:35Z

I think this PR can be review, I want to refactor https://bing-wallpaper.deno.dev after this PR merge, it will be testting.

ije · 2022-05-08T03:44:53Z

@linbingquan 👍 great job! i will look into it, thanks

framework/vue/link.ts

ije · 2022-05-08T12:55:10Z

the deploy build testing was failed, i will look into it

linbingquan · 2022-05-08T12:57:58Z

the deploy build testing was failed, i will look into it

OK, I was try to found the error for Aleph.js CI / Deploy (aleph-vue, examples/vue-app) , but I can not resolve it...

…e data without refresh.

ije · 2022-05-10T16:24:03Z

@linbingquan i'm going to merge this pr, you done this vary well! congratulations! 🎉

ije · 2022-05-10T16:25:02Z

i will fix the build issue later, please keep improving the vue framework if you have time

wip(framework/vue): it can work.

e8007a5

wip(framework/vue): add createSSRApp and Link

334ea64

linbingquan added 5 commits May 5, 2022 05:43

fix(client): fix routeModules error

2ff7a56

feat(Router): Add router

160174a

fix(server): fix ssrHeadCollection bug

9a2af01

feat(vue-app): Update index.vue style.

432dbcb

wip(framework/vue): add useDate

ed4391d

ije reviewed May 6, 2022

View reviewed changes

CONTRIBUTING.md

@@ -30,6 +32,19 @@ deno task start examples/react-app

deno task build examples/react-app

```

### vue-app

Copy link

Member

ije May 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

ije reviewed May 6, 2022

View reviewed changes

framework/vue/data.ts Outdated Show resolved Hide resolved

ije reviewed May 6, 2022

View reviewed changes

framework/vue/router.ts Outdated Show resolved Hide resolved

ije reviewed May 6, 2022

View reviewed changes

examples/vue-app/routes/todos.vue Show resolved Hide resolved

refactor(framework/vue): use inject for header and useData

650eba3

refactor(framework/vue): Add ssrRenderComponent for Head component.

65b8148

ije mentioned this pull request May 7, 2022

Roadmap 1.0.0 #461

Open

2 tasks

linbingquan added 5 commits May 7, 2022 18:39

feat(framework/vue): Add useRouter() composition api

3ef69ff

refactor(framework/vue): support base meta and link tag for Head

6ac4b32

fix(framework/vue): fix server-renderer warning

eda80d3

refactor(framework/vue): rename Router to App.

ca60f7c

chore(framework/vue): remove useless code.

ae6f0e8

linbingquan marked this pull request as ready for review May 7, 2022 23:34

linbingquan changed the title ~~wip(framework/vue): it can work.~~ feat(framework/vue): framework support for Vue.js May 7, 2022

ije reviewed May 8, 2022

View reviewed changes

framework/vue/link.ts Outdated Show resolved Hide resolved

feature(Link): support Link import the route modules and fetch rout…

b94e8ee

…e data without refresh.

ije merged commit e974bc5 into alephjs:main May 10, 2022

linbingquan deleted the dev-vue branch May 11, 2022 04:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(framework/vue): framework support for Vue.js #464

feat(framework/vue): framework support for Vue.js #464

linbingquan commented May 3, 2022 •

edited

Loading

ije commented May 4, 2022

linbingquan commented May 4, 2022

ije May 6, 2022

ije commented May 6, 2022

linbingquan commented May 6, 2022 •

edited

Loading

ije commented May 6, 2022

linbingquan commented May 6, 2022 •

edited

Loading

linbingquan commented May 6, 2022 •

edited

Loading

linbingquan commented May 7, 2022 •

edited

Loading

ije commented May 8, 2022

ije commented May 8, 2022 •

edited

Loading

linbingquan commented May 8, 2022 •

edited

Loading

ije commented May 10, 2022

ije commented May 10, 2022

feat(framework/vue): framework support for Vue.js #464

feat(framework/vue): framework support for Vue.js #464

Conversation

linbingquan commented May 3, 2022 • edited Loading

ije commented May 4, 2022

linbingquan commented May 4, 2022

ije May 6, 2022

Choose a reason for hiding this comment

ije commented May 6, 2022

linbingquan commented May 6, 2022 • edited Loading

ije commented May 6, 2022

linbingquan commented May 6, 2022 • edited Loading

linbingquan commented May 6, 2022 • edited Loading

linbingquan commented May 7, 2022 • edited Loading

ije commented May 8, 2022

ije commented May 8, 2022 • edited Loading

linbingquan commented May 8, 2022 • edited Loading

ije commented May 10, 2022

ije commented May 10, 2022

linbingquan commented May 3, 2022 •

edited

Loading

linbingquan commented May 6, 2022 •

edited

Loading

linbingquan commented May 6, 2022 •

edited

Loading

linbingquan commented May 6, 2022 •

edited

Loading

linbingquan commented May 7, 2022 •

edited

Loading

ije commented May 8, 2022 •

edited

Loading

linbingquan commented May 8, 2022 •

edited

Loading