eiru_pos/src/components/CartItems.vue

<template lang="pug">
    transition-group(name="list" tag="ul" class="cart-items")
        cart-item(v-for="item in items" v-bind:key="item" :item="item" :symbol="symbol")
</template>

<script>
    import CartItem from '@/components/CartItem'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        props: {
            symbol: {
                type: String,
                default: '$'
            }
        },
        components: {
            'cart-item': CartItem
        },
        computed: mapGetters({
            items: 'getCartItems'
        }),
        methods: mapActions([
            'addToCart',
            'removeFromCart'
        ])
    }
</script>

<style lang="sass">
    .cart-items-wrapper
        width: 100%
        height: 100%
        overflow-y: auto
        overflow-x: hidden

    .cart-items
        width: 100%
        height: calc(100% - 30px)
        padding: 0
        margin: 15px 0

    .list-enter-active, .list-leave-active
        transition: all 0.3s

    .list-enter, .list-leave-to
        opacity: 0
        transform: translateX(300px)
</style>