Blog Components

Welcome to the blog-components library, a component library for canopas blogs website.

About

The blog-components is an open-source library developed and maintained by Canopas. Crafted using vue.js and tailwindcss a lightweight and highly efficient CSS platform on top of Nuxt 3 framework, showcasing a commitment to robust and advanced web development practices. For preview visit canopas blogs page .

Showcase

Blogs List UI

Blogs Detail UI

Prerequisites

Prior to integrating blog-components into your project, please ensure that tailwindcss is installed and properly configured within your project environment.

Quick Setup

1. Add blog-components dependency to your project .

Using yarn :

yarn add --dev @canopassoftware/canopas-blog-components

Using npm :

npm install --save-dev @canopassoftware/canopas-blog-components

2. Add blog-components to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    "@canopassoftware/canopas-blog-components"
  ],
});

That's it! You can now use module in your Nuxt app ✨

Here are the examples,

For all blog list,

  <BlogList :showDrafts="true" />

For tag list,
  <TagList :slug="slug" @notfound="<your-callback>" :showDrafts="true"  />


For Blog details,
  <BlogDetail
      :slug="slug"
      @notfound="<your-callback>"
      :showDrafts="true"
      :iframely-key="IFRAMELY_KEY"
      :recaptcha-key="RECAPTCHA_SITE_KEY"
    />

Steps to Run the component

Install dependencies

yarn install 

To initialize the Nuxt repo :

npx nuxi prepare

To create output.css file

yarn prepack

• Copy output.css file from .dist/ folder and paste inside the src folder

Start component in dev mode using :

yarn dev 

Compiles and minifies for production :

yarn dev:build 

yarn generate

You can access the page by pointing a web browser at http://localhost:3000

LICENSE

This repository licenced under MIT.