Improve recommendations for adding Lux to a static HTML page

When we first added Lux to LibCal, we mounted it to the page's body,
which conflicted with some other javascript that was necessary to
successfully make appointments (the appointments would go through,
but the user would get confusing error messages and unstyled content).

We found that this issue goes away if you mount separate areas of
the DOM as separate Vue apps.

docs/adding_lux.md

@@ -107,11 +107,42 @@ Vue application and installs lux as a vue plugin.
     app.use(lux)
     .mount('#app');
     ```
+    If you are only using lux for a header and footer:
+    ```
+    import { createApp } from 'vue';
+    import lux from 'lux-design-system';
+
+    const headerApp = createApp({});
+    headerApp.use(lux)
+    .mount('#lux-header-container')
+
+    const footerApp = createApp({});
+    footerApp.use(lux)
+    .mount('#lux-footer-container');
+    ```
+
 1. Import the CSS as from a CDN.
     ```
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
     ```
-1. Add lux components as needed in your HTML.
+1. Add lux components as needed in your HTML.  If you are just adding a
+   header and footer:
+   ```
+   <div id="lux-header-container">
+    <lux-library-header app-name="Research Guides" abbr-name="Guides" app-url="https://libguides.princeton.edu/" theme="dark">
+      <lux-menu-bar type="main-menu" :menu-items="[
+          {name: 'Help', component: 'Help', href: 'https://library.princeton.edu/ask-us'},
+          {name: 'Your Accounts', component: 'Account', href: 'https://library.princeton.edu/accounts'}
+        ]"
+      ></lux-menu-bar>
+    </lux-library-header>
+
+    <!-- the rest of your page -->
+
+    <div id="lux-footer-container">
+      <lux-library-footer></lux-library-footer>
+    </div>
+   ```
 1. Add classes or CSS variables from lux to your styling.
 
 ##### Adding Lux to a static HTML page using an IIFE file