Search code examples
javascriptvue.jscomponentscopy-pastecodepen

How can one use Vue.js code from Codepen?

I want to use this code from Codepen. So, I right clicked on the result frame and chose View Frame source. Then I copied the source code and pasted it in my own text-editor.

But my webpage shows the codepart as blank.

enter image description here

I copied the source starting from <style> till </body> and inserted in my component. When using the ZIP instead, I don't know how to use the code, because I just have a component and the ZIP contains a script.js and a style.css

What am I doing wrong?

Solution

  • Ok here's copy-and-pasting for dummies: This is the html part:

    <html lang="en">

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <table class="dayparts table">
            <thead>
                <tr>
                    <td class="cell-label presets-label"></td>
                    <td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
                        <select v-model="selected" @change='clearAll();selectedFunc()'>
                            <option value="">Select a Preset</option>
                            <option value="0">None</option>
                            <option value="1">Afternoons</option>
                            <option value="2">Evenings</option>
                            <option value="3">Mornings</option>
                            <option value="4">Weekdays</option>
                            <option value="5">Weekends</option>
                            <option value="6">Weekends including Friday</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2"></td>
                    <td class="cell-label am-label" colspan="12">AM</td>
                    <td class="cell-label pm-label" colspan="12">PM</td>
                </tr>
                <tr class="hour-row">
                    <td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
                    </td>
                </tr>
            </thead>
            <tbody @mousedown='mouseDown' @mouseup='mouseUp' @mousemove='mouseMove'>
                <tr class="day" v-for="day in days">
                    <td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
                        v-on:click='activateDay'>{{day.dayName}}</td>
                    <td class='dayparts-cell' v-bind:value="hour.hour" data='day'
                        v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>

</html>

    This is the "head":

    <head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

    1) Remove <link rel="stylesheet" href="style.css"> and add <style></style> in the same place. Fill it with the content of the css-part.

    2) Replace "vue.js" in <script src="vue.js"></script> with "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" when you're in development or with "https://cdn.jsdelivr.net/npm/vue@2.6.11" for production.

    Then go to the bottom of your html-code and find <script src="main.js"></script>. Remove it and add an empty <script></script> instead. Fill it with the copied Javascript part.

    Now your page should run properly.

    Tip: Do not use Ctrl + A in Codepen to select everything since it selects a few extra words then.