πŸŽ‰ Black Friday deal! 25% off your first year of CodyHouse Pro →

Using the CodyHouse components with Vue.js

Learn how to include the CodyHouse components in a Vue.js project

The CodyHouse components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the CodyHouse Framework.

Since the components are built using vanilla JavaScript, they work with JavaScript frameworks, as well.

In this article, we want to show you how to include the CodyHouse components in your Vue.js project.

Install the CodyHouse Framework

The first step is including the CodyHouse framework. This front-end framework (8KB minified and gzipped) is composed of CSS variables, mixins, and utility classes used to stylize the Components.

In your Vue.js project, install the CodyHouse framework as npm module. Once the installation is complete, copy the πŸ“custom-style folder (where you'll find the custom style templates) of the framework in the πŸ“src folder of your project, then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '~codyhouse-framework/main/assets/css/base';
@import 'custom-style';

You can now compile the _style.scss file in style.css as you would typically do using your vue.config.js file.

You can find more info about the webpack configuration we use to load SCSS files and compile them to CSS on our Using the Framework with Webpack documentation page.

As the last step, we need to include the util.js file of the framework: this file contains utility functions and polyfills that we use when creating the components.

In your index.html file, add the following script tag:

<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>

If you don't want to use unpkg, you can import the JS file directly from the codyhouse-framework module or make a local copy in your public folder:

<script src="<%= BASE_URL %>util.js"></script>

Progressive enhancement

The Components are built following the principle of progressive enhancement. Please make sure to include the following script in the <head> of your index.html file:

<script>document.getElementsByTagName("html")[0].className += " js";</script>

The script is used in CSS to target that Javascript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.

Import the CodyHouse Components

For each CodyHouse component, you can create a .vue component and use, as a template, the HTML code we provide. For example, if you want to include the Read More component, you can create a ReadMore.vue component:

<template>
  <p class="read-more js-read-more" data-btn-class="read-more__btn js-tab-focus" data-ellipsis="off">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio corporis facilis, debitis a qui eum dolor repudiandae harum, impedit, fugit cumque. Tenetur, a quas labore eveniet accusantium, vero reiciendis quaerat inventore vel consequatur iusto fugiat perferendis rerum nihil qui deleniti earum eum numquam velit quod explicabo, fuga saepe ad temporibus! </p>
</template>

<script>
  export default {
    name: 'ReadMore'
  }
</script>

You can modify the HTML code of the component to include props.

For the Read More component, you could pass the data-btn-class and data-ellipsis as props (they are used to customize the behaviour of the component) and pass the content as a <slot>:

<template>
  <p class="read-more js-read-more" :data-btn-class="btnClass" :data-ellipsis="ellipsis">
    <slot></slot>
  </p>
</template>

<script>
  export default {
    name: 'ReadMore',
    props: {
      btnClass: {
        type: [String],
        default: "read-more__btn"
      },
      ellipsis: {
        type: [String],
        default: "on"
      }
    }
  }
</script>

Now include the SCSS code of the component either inside the ReadMore.vue file or in the _style.scss (as you would do with all your .vue components).

For the JS code to work correctly, you'll need to load it once the component has been mounted.

In your πŸ“public folder, create a read-more.js file with the JS code of the component and modify your App.vue/Page.vue component to append this file to the body once the page has been mounted:

<template>
  <div>
    <Header/>

    <ReadMore btnClass="read-more__btn js-focus-tab">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio corporis facilis, debitis a qui eum dolor repudiandae harum, impedit, fugit cumque. Tenetur, a quas labore eveniet accusantium, vero reiciendis quaerat inventore vel consequatur iusto fugiat perferendis rerum nihil qui deleniti earum eum numquam velit quod explicabo, fuga saepe ad temporibus!
    </ReadMore>

    <Footer/>
  </div>
</template>

<script>
  import Header from './components/Header.vue'
  import ReadMore from './components/ReadMore.vue'
  import Footer from './components/Footer.vue'

  export default {
    name: 'home',
    components: {
      Header,
      ReadMore,
      Footer
    },
    mounted() { // πŸ‘ˆ load the JS code once the page is mounted
      let frontEnd = document.createElement('script');
      frontEnd.setAttribute('src', './read-more.js'); // πŸ‘ˆ make sure to use the correct path
      document.body.appendChild(frontEnd);
    }
  }
</script>

That's all! Your ReadMore Vue component is now complete.

If you are planning on including multiple components, we suggest creating a single frontend.js file (with the JS code of all CodyHouse components you are using) and append it to the body once your page component has been mounted.

You can find more info about the webpack configuration we use to merge all the component JS files in a single frontend.js file on our Using the Framework with Webpack documentation page.

Feedbacks/suggestions? Get in touch on Twitter.

βœ… Project duplicated

βœ… Project created

There was an error while trying to export your project. Please try again or contact us