The CodyHouse components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.
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 CodyFrame
The first step is including CodyFrame. This front-end framework is composed of CSS variables, mixins, and utility classes used to stylize the Components.
Follow this guide to install CodyFrame as npm module and import the custom style folder of the framework.
Once this is done, you can 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 inside the ReadMore.vue file. Make sure to import the breakpoints and mixins of the framework as well:
<template>
<p class="read-more js-read-more" :data-btn-class="btnClass" :data-ellipsis="ellipsis">
<slot></slot>
</p>
</template>
<style lang="scss">
// 👇 you may need to update these paths according to your project structure
@use "../../node_modules/codyhouse-framework/main/assets/css/base/breakpoints" as *;
@use "../../node_modules/codyhouse-framework/main/assets/css/base/mixins" as *;
/* --------------------------------
File#: _1_read-more
Title: Read More
Descr: A truncated paragraph with the option of reading more content
Usage: codyhouse.co/license
-------------------------------- */
// ...
</style>
<script>
export default {
name: 'ReadMore',
props: {
btnClass: {
type: [String],
default: "read-more__btn"
},
ellipsis: {
type: [String],
default: "on"
}
}
}
</script>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 the component to append this file to the body once it has has been mounted and to remove it once the component has been destroyed:
<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"
}
},
mounted() { // 👈 load the JS code once the component is mounted
let frontEnd = document.createElement('script');
frontEnd.setAttribute('src', './read-more.js'); // 👈 make sure to use the correct path
frontEnd.setAttribute('id', 'read-more-js');
document.body.appendChild(frontEnd);
},
destroyed() { // remove the JS code once the component has been destroyed
document.getElementById('read-more-js').remove()
}
}
</script>That's all! Your ReadMore Vue component is now complete.
Feedbacks/suggestions? Get in touch on Twitter.
