Best practices for managing SVG component width and height for VueJS

user_11729954 0
Viewed 170

I'm relatively new to Vue JS and it is my first frontend framework. I used Vue 3 without deep prior knowledge of CSS & HTML.

I have coded a few components for my job but one thing I realised is that I tend to put width & height as the props almost all the time. (Then maybe use a computed property for the child component's style) Example below:

<template>
  <child-component :style="childStyle" class="child">
    ...
  </child-component>
  
  <svg>
    <rect :width=`${getChildWidth(width)}` :height=`${getChildHeight(height)}` viewBox=`0 0 ${getChildWidth(width)} ${getChildHeight(height)}`/>
  <svg/>
</template>

<script setup lang="ts">
import {computed, toRefs} from 'vue';

const props = defineProps({
  width: {
    type: Number as PropType<number>,
    required: true,
  },
  height: {
    type: Number as PropType<number>,
    required: true,
  },
})


const { width, height } = toRefs(props)


function getChildWidth(width: number) { ... }
function getChildHeight(height: number) { ... }

const childStyle = computed<StyleValue>(() => ({
  width : `${getChildWidth(width)}px`,
  height : `${getChildHeight(height)}px`,
}))


</script>

<style scoped>
.child {
  ...
}

</style>

My question is whether there are any best practices associated with managing Vue component sizes more dynamically and also what's the best way (with a simple example) to use CSS to dynamically control child-component's size. I'm afraid that using Javascript to dynamically control component sizes all the time may reduce code reusability and/or introduce a lot of code. Pls enlighten me. Thank you.

Edit 1 : Add SVG into the question

Thank you user entio for your answer. Sorry I forgot to add SVG because that's when I think that I'm forced to explicitly use pixel sizes propped down from the parent. How should I do the same with components containing SVG elements?

vuejs3 vue-component svg css javascript
1 Answers

Always try to build your layouts and size your components using CSS. There're new, useful features of CSS allowing you to create layouts much more efficient than it used to be, to name one: CSS grid. There's a nice game tutorial helping to grasp the idea: https://cssgridgarden.com. Another feature may be the Flexbox (another game - tutorial: https://flexboxfroggy.com).

When it comes to choosing which component should bear the responsibility of sizing - it really depends on the role of the component. Some of them are layout components (f.e. component having a main part and a sidebar) and these probably define sizes for the children components. Others are just atoms, and they use their own sizes (as you don't want to externally constrain a size of a button or tag for example).

I think that it could be beneficial to you when thinking about components (at least I found it useful) to read Brad Frost's Atomic Design. It's a set of principles he lays out to highlight various roles a component may take in a design system (or an application). You most probably won't need a book, there's plenty of resources available online.

Most of the times I tend to create my components so that they are responsive (adjust their dimensions to it's parent). If I want to constrain the component size I most of the times do it in the parent component. It then enables me to use the child component in a various places, independent on the space available in these places.

user_16607570
Related