feat($core): introduce vue meta to replace the current meta strategy fix #2153

[d-pollard]

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

This feature introduces vue-meta in a way that is backwards compatible with our current meta strategy.

It also exposes vueMeta to frontmatter so you can directly use the API.

Still a WIP

[adamdehaven]

@d-pollard is there any update on this?

I have been playing around with Gridsome this past week because it is able to render content before hydration (interested mainly for SEO, etc.), and also already utilizes vue-meta.

If this PR implements vue-meta, that would solve half of the issue for me. My second question (maybe separate PR, if in scope) would be is it possible to pre-render content with VuePress similar to Gridsome when desired?

My use-case example is a blog setup where you want content available on the page for SEO (etc.) before hydration.

[d-pollard]

@adamdehaven this is something I think would probably integrate fairly smoothly unless there are objections

This PR probably needs a few reviewers (you could review if you'd like!)

Will also want a few core team members to take a peak and see what they think

[adamdehaven]

@d-pollard I just started remodeling 2 bathrooms so my time is kinda scarce the next couple weeks outside of my regular job 😬 but if I have some time I'll definitely start reviewing 👍.

I'm guessing the static site content pre-render (similar to Gridsome and Nuxt) would be a separate PR, so if that gets going, definitely tag me and I'll review that for SURE 🎉. I'm thinking that would be a setting that is configurable since I'm sure there are some that prefer the content to wait until after hydration.

[d-pollard]

@adamdehaven - this should include the static site pre-render

[adamdehaven]

@d-pollard so I'm trying to run local in my project to test and I get Error: Cannot find module 'webpack' when importing webpack into my .vuepress/config.js file. Any idea how to resolve?

Edit: Actually, it seems to be missing lots of dependencies (the next one is PostCSS) so I'm wondering if I'm running locally the wrong way? I followed the steps outlined here for local development

[adamdehaven]

@d-pollard ok, I'm not sure what I forgot to do the other day, but I was able to get this up and running in an existing project for an initial pass. Here's some feedback:

• The ideal way to utilize vue-meta here (and the original ask) would be to allow for dynamically injecting/generating the values in a component via Vue Meta's metaInfo object/function (rather than through frontmatter.vueMeta with static values), although I agree, both should be supported. This wasn't documented in your PR; however, the metaInfo object (or return a function) appears to work, with a couple exclusions....

  • If you define the metaInfo object in more than one component (e.g. GlobalLayout.vue and then within a component that displays within the <Layout/>) it doesn't seem to work; the options do not appear to get merged. I'm assuming the user needs to set up the metaInfo in a single component, so if that is the case, it prob. needs to be documented?
  • If all pages do not have a vueMeta object in the frontmatter, or a metaInfo object/function in a component, the build fails with This vue app/component has no vue-meta configuration, so there likely needs to be some sort of a default "empty" vue-meta configuration that the frontmatter.vueMeta and metaInfo get appended to/merged with to prevent the missing configuration error.

• All vue-meta properties are not supported (unsure if the plan was to support all features, but thought I'd make a note). For example, bodyAttrs do not get injected onto the <body> tag, etc.

• I was not able to get the frontmatter.vueMeta to successfully inject data. When using Vue DevTools, the $vuepressMeta object returned: (error during evaluation). I tried the following ways to define meta in the frontmatter with no success:

  # Test 1 (fail)
  vueMeta:
    - meta:
        - name: description
          content: This is a test description.
  
  # Test 2 (fail)
  vueMeta:
    - name: description
      content: This is a test description.

• The rendered static files produced when running build appear to include the vue-meta data when properly configured using the metaInfo object/function in a component without any of the above scenarios (e.g. when I tested a single tag, it worked); however, not when defined/used in multiple components.