Laravel and vuestrap-base-components - WEBPACK
<!DOCTYPE html>
<html id="app">
<head>
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<jumbotron>
<div class="title">Laravel <badge>5</badge></div>
</jumbotron>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script src="assets/bundle.js"></script>
</body>
</html>
var path = require('path');
module.exports = {
resolve: {
root: path.resolve('./')
},
entry: [
'./resources/assets/js/index.js'
],
output: {
path: path.resolve('public/assets/'),
filename: "bundle.js"
},
themeLoader: {
themes: ['./resources/assets/sass/theme.scss', './node_modules/vuestrap/theme/bootstrap.scss'], // docs theme, default bootstrap
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel'
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.scss$/,
loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader!vuestrap-theme-loader'
}]
}
};
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir-webpack": "^0.2.2"
},
"dependencies": {
"autoprefixer-loader": "^3.1.0",
"laravel-elixir": "^4.0.0",
"bootstrap-sass": "^3.0.0",
"vuestrap": "^1.0.0",
"vuestrap-base-components": "^0.4.1",
"vuestrap-theme-loader": "^0.1.2",
"html-loader": "^0.3.0",
"babel-core": "^5.8.33",
"babel-eslint": "^4.1.3",
"babel-loader": "^5.3.3",
"css-loader": "^0.21.0",
"sass-loader": "^3.1.1",
"style-loader": "^0.13.0"
}
}
// in resources/assets/js/index.js
import badge from 'vuestrap-base-components/src/components/badge'
import jumbotron from 'vuestrap-base-components/src/components/jumbotron'
window.app = new Vue({
el: '#app',
components: {
'badge': badge,
'jumbotron': jumbotron
}
})