Prefetch and sync state to client with one line of code, out-of-the-box

Overview

vue3-SSR-starter

Prefetch and sync state to client with one line of code, out-of-the-box

Features

  • vue3
  • SSR
  • vue-router
  • we don't need vuex anymore
  • one line of code to sync state
  • vite2
  • tailwind.css

Project setup and usage

npm i
npm run dev
// localhost:3001

Server prefetch and sync to client with one line of code

It provide syncState object to sync the prefetch data to client, you only need one line of code:

async function setup () {
  // ...

  // request home data in server, and sync to client
  syncState.homeData = syncState.homeData || await request('/api/home')

  // ...
}

Because of the setup hook run in both of server and client, so even server fetch is fail, it will be downgrade to client fetch, complete code:

// see src/pages/index.vue
import { reactive } from 'vue'
import { useSyncState, useRequest } from '../hooks/app'
async function setup () {
  const request = useRequest()
  const syncState = useSyncState()
  // sync data to client, if server fetch is fail, will be fetch in client, see index.html and server.js
  if (!syncState.homeData) {
    syncState.homeData = await request('/api/home')
  }

  const homeData = reactive(syncState.homeData)

  return {
    homeData
  }
}

App hook and business hook

You maybe write a business in many clients, e.g. PC web, mobile web, mini program the business is same, but dom, style and project code is different, such as request, in web we can use axios, but in mini program we can only use wx.request, for business code unification, we need a request function to smoothing platform differences.

So we provide app hooks, you need to write your app hook in every client, but your business hook can be a npm package

app hooks

see in src/hooks/app

interact

interact components is different in every client, so we need to provide a unification API:

import { onMounted } from 'vue'
import { useInteract } from '../hooks/app'
export default {
  setup () {
    const { loading, toast, modal, confirm } = useInteract()
    onMounted(() => {
      loading.open('loading...')
      setTimeout(loading.close, 1000)
      // API: loading.open(text = ''),  loading.close()

      toast('123')
      // API: toast(content = '', type = 'info', duration = 2500)

      modal('this is a modal', 'modal content', 'error')
      // API: modal(title = '', content = '', type = 'info')
  
      confirm({
        title: 'please confirm your action',
        content: 'delete this data?'
      }).then(action => {
        console.log(action)
      })
      /* API: confirm ({
        type = 'info',
        title = '',
        content = '',
        showCancelButton = true,
        cancelButtonText = '取消',
        confirmButtonText = '确定'
      }) */
    })
  }
}

You can reimplement it everywhere, see src/hooks/app/interact.js

session

Provide user info or client info, you can also update the session data, and yes, we don't need vuex anymore:

import { onMounted } from 'vue'
import { useSession } from '../hooks/app'
export default {
  setup () {
    const { token, UUID, platform, userProfile, host, isLogin, setToken, setUserProfile } = useSession()
    onMounted(() => {
      console.log(token, UUID, platform, userProfile, host, isLogin)
    })
    function onLogin (token) {
      setToken(token)
    }
    function updateCartCount () {
      setUserProfile({ cartCount: 3 })
    }
  
    return {
      onLogin,
      updateCartCount
    }
  }
}

request

Provide an axios instance to fetch data in server and client:

import { useRequest } from '../hooks/app'
async function setup () {
    const request = useRequest()
    
    // API: request(url = '', params = {}, method = 'get', contentType = 'form', headers = {}, responseType = 'json')
    const res = await request('/api/home')
    console.log(res)
  }
export default { setup }

SEO/SMO

Set html head tags for SEO or SMO: e.g. title, description, keywords, ogp.

import { useSXO } from '../hooks/app'
function setup () {
    const { setSEO, setSMO } = useSXO()
    
    setSEO({
      title: 'SEO title',
      description: 'SEO description'
    })
    setSMO({ title: 'SMO title' })
  }
export default { setup }

It will be set default value on router change if you have not set in pages, you can set the default value in src/router/index.js

business hook

You can refer to src/hooks/business/useCart.js and src/pages/cart.vue, please make it universal

Api proxy and serve port

See config/ssr.config.is

You might also like...

The HTTP client for Vue.js

vue-resource The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP. Features Supports t

Dec 30, 2022

A Vale client for Obsidian.

A Vale client for Obsidian.

Obsidian Vale A Vale client for Obsidian. Prerequisites Vale Server or Vale CLI Configuration To install Vale CLI: Go to their release page. Under Ass

Dec 30, 2022

Restream is a module that allows you to create a stream of an audio/video file from the Firebase storage, protected from direct download through the client-side.

nuxt-restream Restream is a module that allows you to create a stream of an audio/video file from the Firebase storage, protected from direct download

Dec 13, 2022

Nuxt eureka client

Nuxt eureka client

May 30, 2022

Remove all client-side JS from your Nuxt 3 app

Nuxt Zero JS Remove all client-side JS from your Nuxt 3 app ✨ Changelog ▶️ Online playground Features ⚠️ nuxt-zero-js is under active development. ⚠️

Jan 3, 2023

Based on vitawind, kowind brings ESLint plugin and some other plugins to it that help you to format your code quickly and efficiently.

🐦 KOWIND v3 🐦 Vite helper based on vitawind 🧰 Easy To Install ⚡️ Automatically open Tailwind JIT Mode ⚙ One-Command Setting 🚀 Automatically config

Nov 26, 2022

Morse code is a method used in telecommunication to encode text characters as standardized sequences of two different signal durations, called dots and dashes, or dits and dahs.

@elonehoo/point-line Install # npm npm i @elonehoo/point-line # yarn yarn add @elonehoo/point-line #pnpm pnpm i @elonehoo/point-line Usage import {dec

Aug 3, 2022

A swiss army knife with lots of tools, extensions and (scriptable) enhancements for Visual Studio Code.

A swiss army knife with lots of tools, extensions and (scriptable) enhancements for Visual Studio Code.

vscode-powertools A swiss army knife with lots of tools, extensions and (scriptable) enhancements for Visual Studio Code. ⚠️ ⚠️ ⚠️ NOTICE: If you have

Nov 24, 2022

Next version of massCode [WIP]. A free and open source code snippets manager for developers

Next version of massCode [WIP]. A free and open source code snippets manager for developers

massCode next Built with Electron, Vue 3 & Ace Editor. Inspired by applications like SnippetsLab and Quiver. ☝️ massCode is currently in development,

Jan 5, 2023
Owner
周子贤
周子贤
emoji-box

emoji-box 特别说明: 基于 Vue3 编写,Vue2 不适用。 本项目中的表情(圆脸、其他、手势、动物)基于微软开源表情制作,可商用。 如涉及其他表情用于不正当的行为,后果由使用者承担责任,与本项目无关。 安装 npm npm i emoji-box yarn yarn add emoj

null 1 Dec 27, 2022
🗃️ Centralized State Management for Vue.js.

Vuex ?? HEADS UP! You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, please check out 4.0 branch. Vuex is a state management pat

vuejs 27.9k Dec 30, 2022
The state manager ☄️

☄️ effector The state manager Table of Contents Introduction Effector follows five basic principles: Installation Documentation Packages Articles Comm

effector ☄️ 4.1k Jan 9, 2023
⚡️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dizzy 245 Dec 27, 2022
⚡️ Minimal GraphQL Client + Code Generation for Nuxt3

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Documentation Features Z

Conrawl Rogers 245 Dec 27, 2022
Obsidian plugin to add keyboard shortcuts commonly found in code editors such as Visual Studio Code or Sublime Text

Code Editor Shortcuts This Obsidian plugin adds keyboard shortcuts (hotkeys) commonly found in code editors such as Visual Studio Code or Sublime Text

Tim Hor 143 Dec 30, 2022
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive impl

BootstrapVue 14.2k Jan 4, 2023
⚡ Create awesome project by one command

cap cap means create awesome project, it has some common engineering configurations built in. You can create a project with one line of command. Usage

chlorine 16 Dec 17, 2022
🏎 A tiny and fast GraphQL client for Vue.js

villus Villus is a finger-like structures in the small intestine. They help to absorb digested food. A small and fast GraphQL client for Vue.js. This

Abdelrahman Awad 639 Jan 8, 2023
A client for QQ and more.:electron:

Icalingua++ Icalingua++ 是 Icalingua 的分支,為已經刪除的 Icalingua 提供有限的更新,同時歡迎社區提交PR。 Icalingua 这个名字是日语中「光」和拉丁语中「语言」的组合。 本项目希望为 Linux 打造一个会话前端框架,通过实现 Adapter 后

Icalingua++ 2.6k Dec 31, 2022