VueJS CRUD: Single HTML Page

in VueJS Crud

This CRUD application will run off a single HTML page, this takes advantage of the VueJS router functionality, by allowing us to replace the components in view by switching out the contents of the router-view tag.

For quick styling we're going to load in Twitter bootstrap, and our own stylesheet for any custom styles you want.

At the bottom of the file we're going to load in the JavaScript file that is output by Webpack located in /dist/build.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS Products Crud</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="http://localhost:8080/src/assets/css/style.css" rel="stylesheet">
</head>
<body>

<div id="app">
</div>

<script src="http://localhost:8080/dist/build.js"></script>

</body>
</html>

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email