ofajs-in-vue3

Using ofa.js in a Vue project.

screenshot.mp4

Main Steps

1. Include ofa.js in index.html

  <head>
    ...
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
    <style>*:not(:defined){display:none;}</style>
  </head>
  ...

2. Exclude Custom Component Tags from the Whitelist

View File

module.exports = defineConfig({
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          isCustomElement: (tag) => {
            // use the l-m and punch-logo component
            return ["l-m", "punch-logo"].includes(tag);
          },
        },
      }));
  },
});

3. Use Components in Vue Files

Components developed based on ofa.js must be published (or hosted on a local static server). If there are errors when using components, you can use eslint-disable-next-line to resolve them.

View File

<l-m src="https://ofajs.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"></l-m>

<punch-logo>
    <img
    src="https://ofajs.github.io/ofa-v4-docs/docs/publics/logo.svg"
    logo
    height="90"
    />
    <h2>{{ msg }}</h2>
    <!-- eslint-disable-next-line -->
    <p slot="fly">npm</p>
    <!-- eslint-disable-next-line -->
    <p slot="fly">webpack</p>
    <!-- eslint-disable-next-line -->
    <p slot="fly">nodejs</p>
</punch-logo>

About

Using ofa.js in Vue

MIT License

Languages

Language:Vue 74.6%Language:HTML 14.2%Language:JavaScript 11.1%