DOCSEARCHbyAlgolia
Submit Docs

midway-vue3-ssr Documentation

website·Indexed 31 days ago

http://midway-vue3-ssr.liqingsong.cc/

A Server-Side Rendering (SSR) framework assembled using Midway, Vue 3, and TypeScript. It features integrated Vite services, Pinia for state management, and extended Vue.js methods such as asyncData and seo for data fetching and SEO optimization.

Tokens
9.2K
Snippets
41
Records
58
Agent score
59%

What's inside midway-vue3-ssr

  1. Overview of the Midway Node.js Framework

    Midway is a progressive Node.js framework developed by Alibaba's Taobao frontend architecture team. It is built with TypeScript and utilizes a custom dependency injection (DI) container to allow developers to combine various modules for different scenarios. The framework supports multiple programming paradigms, combining Object-Oriented Programming (OOP, Class, IoC) with Functional Programming (FP, Function, Hooks). It is designed for a wide range of use cases, including Web services, Full-stack applications, Microservices, RPC, Socket, and Serverless environments.

  2. Overview of midway-vue3-ssr

    midway-vue3-ssr is a frontend Vue SSR solution that integrates the Midway Node.js framework with a modern frontend stack. It is designed to be easy to learn and extend, allowing developers to use Midway as a request middleware layer or create a fully integrated full-stack application.

  3. Overview of Vue.js for UI Development

    Vue is a JavaScript framework used for building user interfaces. It is built on standard HTML, CSS, and JavaScript, providing a declarative and component-based programming model to efficiently develop UIs of varying complexity.

  4. Overview of the Vue 3 and Midway SSR framework

    This framework is assembled using Vue 3, Midway, and TypeScript. It is designed to be 'out-of-the-box' ready for developers who are already familiar with Vue 3 and Midway, requiring no additional learning curve to get started.

  6. Define and use Pinia stores in a Vue 3 SSR project

    Pinia is the recommended state management library for Vue 3. In this project, stores can be defined globally in /web/store or locally within a specific page directory (e.g., /web/views/About/store.ts). This allows for both shared global state and page-specific state management.
    import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
  }),
});

  7. Understand the SSR routing trigger mechanism

    The application uses a hybrid routing approach divided into Midway backend routing and Vue frontend routing. The trigger mechanism depends on the user's action:

    1. Initial Page Load or Refresh: The request is first handled by the Midway backend, which maps the URL to a backend route. It then passes through viteServerRender processing, after which the Vue frontend router takes over to load the corresponding page.
    2. Client-side Navigation (Link Click): The Vue frontend router directly intercepts the request and loads the page without involving the backend.

  8. Compile Midway and Vue 3 SSR source code

    Because the project is written in TypeScript, it must be compiled before deployment. The pnpm run build command executes a sequence of steps: cleaning historical build files, compiling Midway code, and compiling both the Vue client and server code.
    pnpm run build

  9. Prerequisites for using midway-vue3-ssr

    To use midway-vue3-ssr, you must meet the following environment and knowledge requirements:

    System Requirements:

    • Node.js version >= 12.0.0
    • Git
    • Note: Legacy browsers (such as Internet Explorer) are not supported.

    Required Knowledge:

    • Frameworks/Libraries: Midway, Vue 3.x, Vue-router, Pinia, Element Plus, and Axios.
    • Languages: TypeScript and ES2015+.
    • Build Tools: Familiarity with Vite and Webpack.

  10. Separate third-party libraries using rollup-plugin-external-globals in Vite

    To reduce the size of public files and improve loading speed, you can exclude third-party libraries from the build bundle and provide them as global variables via CDN or local static files. This requires configuring rollupOptions.external to prevent bundling and rollup-plugin-external-globals to map the import names to the global variables exported by the external scripts.
    pnpm add rollup-plugin-external-globals -D
    // /web/vite.config.ts
import { resolve } from 'path';
import { defineConfig, Plugin, UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';
import externalGlobals from 'rollup-plugin-external-globals';

const isClientBuild = process.env.npm_lifecycle_event === 'build:web:client';

export default defineConfig(() => {
  const plugins: (Plugin | Plugin[])[] = [vue()];

  const config: UserConfigExport = {
    root: 'web',
    resolve: {
      alias: {
        '~': resolve(__dirname, '../'),
        '@': resolve(__dirname, './'),
      },
    },
    plugins,
  };

  if (true === isClientBuild) {
    config.build = {
      rollupOptions: {
        // Prevent these libraries from being bundled
        external: [
          'vue',
          'vue-router',
          'vue-demi',
          'pinia',
          'element-plus',
          'qs',
          'axios',
        ],
        plugins: [
          // Map the import name to the global variable name exported by the CDN/script
          externalGlobals({
            vue: 'Vue',
            'vue-router': 'VueRouter',
            'vue-demi': 'VueDemi',
            pinia: 'Pinia',
            'element-plus': 'ElementPlus',
            qs: 'Qs',
            axios: 'axios',
          }),
        ],
      },
    };
  }

  return config;
});

  11. Dynamically set page SEO using the seo method

    The midway-vue3-ssr framework extends Vue.js by adding a seo method to components. This method is called before a component loads (after asyncData and before server-side rendering or route updates), allowing developers to dynamically set or reset SEO metadata based on the current state or route.

    Key behaviors:

    • The data returned by the seo method is merged with the SEO configuration defined in the route.
    • Values returned by the seo method have higher priority than those defined in the route configuration.
    • If the seo method is implemented, it must return an object of type Seo (even if empty).
    • This is primarily used for dynamic content, such as setting a page title based on a specific article's title in a detail page.
    <script lang="ts">
import { defineComponent } from 'vue'
import { useDetailStore } from "./store";

export default defineComponent({
  seo({ store }) {
   const detailStore = useDetailStore(store);
   return {
      title: detailStore.article.title + '-详情测试',
   }
  }
})
</script>

  12. Integrate Element Plus in midway-vue3-ssr

    midway-vue3-ssr integrates Element Plus by default using a full import. You can keep the default, switch to auto-import, or remove it to use a different library.
    pnpm add element-plus
    // main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')