@hcflgov/vue-html-wrapper

@hcflgov/vue-html-wrapper

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="https://github.com/Commbocc/hcflgov-vue-html-wrapper/blob/HEAD/">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>

Components

View the documentation.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.