Vue Css Doodle

Porting of css-doodle to VueJs, a web component for drawing patterns with CSS


This package is available on npm.

    # Deps
    npm install --save @luxdamore/vue-css-doodle


As a component

    // Component
    import { VueCssDoodle } from '@luxdamore/vue-css-doodle';
    import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css';

    // Install

    // Or in a .vue file
    export default {
        components: {
            'vue-css-doodle': VueCssDoodle,

    // Add this line to your main.js
    Vue.config.ignoredElements = [ 'css-doodle' ];

As a plugin

    // Plugin
    import VueCssDoodle from '@luxdamore/vue-css-doodle';
    import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css';

    // Install

Browser's way

    <!doctype html>

            <!-- VueCssDoodle style -->

                <!-- Old way -->
                <link rel="stylesheet" href="" />
                <!-- end old way -->

                <!-- New way -->
                <link rel="preload" href="" as="style" onload="this.rel='stylesheet'" />
                <link rel="preload" href="" as="script" />
                <!-- end new way -->

            <!-- end VueCssDoodle style -->


                Others script (ex. VueJs) and html.

            <!-- VueCssDoodle script -->
                <script src=""></script>
            <!-- end VueCssDoodle script -->



        :doodle {
            @grid: 50x1 / 80%;

        @place-cell: center;
        @size: calc(100% / @size * @i);

        transform: rotate(calc(@i * 5deg));

        border-radius: 30%;
        border: 1px solid hsla(
            calc(10 + 4 * @i), 70%, 68%, @r.8



  • Create a file in the plugins folder;
  • Name it vue-css-doodle.client.js;
  • Install it as a plugin;
  • Import it in the nuxt.config.js file as client side only.



    # Available
    slot="default" # Add the content, it expose v-slot="{ generate }" method to refresh the doodle


Attribute Type Default Required About
title String null false The title
grid String or Number null false Value of grid-attr
use String null false Value of use-attr
height String null false Height of the doodle
width String null false Width of the doodle
mx-auto Boolean false false Add margin-left|right-auto to the doodle
fit-width Boolean false false Force the doodle to fit in a max-width
fit-height Boolean false false Force the doodle to fit in a max-height
fill-height Boolean false false Expand the doodle to an height of 100%
click-to-update Boolean false false Refresh on click
overflow-hidden Boolean false false Add overflow-hidden to the container
absolute Boolean false false Set position to absolute

Check the DOCS for more information.