@hcflgov/vue-html-wrapper NPM

@hcflgov/vue-html-wrapper

NPM

Installation

NPM

npm i --save @hcflgov/vue-html-wrapper

import HcHtmlWrapper from '@hcflgov/vue-html-wrapper'
Vue.use(HcHtmlWrapper)

CDN

https://unpkg.com/@hcflgov/vue-html-wrapper/dist/

<script src="https://unpkg.com/@hcflgov/vue-html-wrapper"></script>

Basic Use

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/@hcflgov/vue-html-wrapper/dist/HcHtmlWrapper.css">
</head>
<body>

  <div id="hc-main" class="d-flex flex-column">
    <!-- header -->
    <header>
      <!-- https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G1 -->
      <nav is="hc-navbar" logo-href="./" skip-content-link="#main-content" class="v-card"></nav>

      <ol is="hc-banner" title="Page Title">
        <li class="breadcrumb-item"><a href="./">Home</a></li>
      </ol>
    </header>

    <main id="main-content">
      <!-- content goes here -->
    </main>

    <!-- footer -->
    <footer is="hc-footer" class="mt-auto"></footer>
  </div>

  <script src="https://unpkg.com/vue@2.6.6/dist/vue.js"></script>
  <script src="https://unpkg.com/@hcflgov/vue-html-wrapper"></script>

  <script type="text/javascript">
  new Vue().$mount('#hc-main')
  </script>
</body>
</html>