@cimpress/vue-components

Cimpress MCP Vue Components

A port of the Cimpress MCP React Components for VueJs

How to use

<template>
  <div>
    <text-field v-model="msg"/>  
  </div>
</template>
<script>
import { TextField }  from '@cimpress/vue-components`
export default {
  components: { TextField },
  data() {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

Notes on compatibility

• These components are a 1 on 1 port of the react components, that means you can use the documentation for those components.
• You don't pass elements as an attribute but as a named slot item.
• The onInput/onChange and value attributes have been replaced with v-model
• All events (e.g. onInput and onChange) have been changed to vue events (e.g. @input and @change)

Full example

React

import React, { Component } from 'react';
import { Modal, TextField } from '@cimpress/react-components';

export default class ModalDemo extends Component {
  state = {
    modalIsOpen: false,
    msg: 'Hello World'
  };
  
  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  openModal = e => {
    this.setState({ modalIsOpen: true });
  };
  
  onInputChange = e => {
    this.setState({ msg: e.target.value });
  };
  
  render() {
    return (
      <Modal
        show={this.state.modalIsOpen}
        onRequestHide={this.closeModal}
        title="An example modal"
        closeButton={true}
        footer={
          <button className="btn btn-default" onClick={this.closeModal}>
            Close
          </button>
        }>
        I am a modal body!
        <TextField
          name="bar"
          label="A Text Field"
          value={this.state.msg}
          onChange={this.onInputChange}
        />
      </Modal>
    )
  }
}

Vue

<template>
  <div>
    <modal
      :show="modalIsOpen"
      title="An example modal"
      :close-button="true"
      @request-hide="closeModal"      
    >
      <div v-slot:body>
        I am a modal body!
        <text-field 
          name="bar"
          label="A Text Field"
          v-model="msg"
        />
      </div>
      <div v-slot:footer>
        <button class="btn btn-default" @click="closeModal">Close</button>
      </div>
    </modal>  
  </div>
</template>
<script>
import { Modal, TextField }  from '@cimpress/vue-components';
export default {
  components: { Modal, TextField },
  data() {
    return {
      msg: 'Hello World',
      modalIsOpen: false
    };
  },
  methods: {
    closeModal() {
      this.modalIsOpen = false;
    },
    openModal() {
      this.modalIsOpen = true;
    }
  }
};
</script>

Porting Progress

• CSS Loader
• Accordion
• Alert
• Breadcrumbs
• Button
• Button Group
• Card Header
• Card
• Carousel
• Checkbox
• Colors
• Currency Selector
• Documentation
• Drawer
• Dropdown
• 404
• Icon
• IconStack
• Label
• Modal
• NavTab
• Notifications
• Pagination
• Phone
• Progress Bar
• Radio
• Robot
• Select
• Select Wrapper
• Slider
• Snackbar
• Spinner
• Stepper
• Table
• Tag
• Tab Card
• Text Field
• Toggle
• Tooltip