├── .env ├── .gitignore ├── README.md ├── craft ├── config │ ├── .htaccess │ ├── db.php │ └── routes.php └── templates │ ├── _layouts │ └── _master.twig │ └── index.twig ├── package.json ├── src ├── js │ ├── App.vue │ └── main.js └── sass │ └── app.scss └── webpack.mix.js /.env: -------------------------------------------------------------------------------- 1 | DB_CONNECTION=mysql 2 | DB_HOST=localhost 3 | DB_PORT=3306 4 | DB_DATABASE=vuecraft 5 | DB_USERNAME=homestead 6 | DB_PASSWORD=secret -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /vendor/ 2 | /craft/app/ 3 | /craft/plugins/ 4 | /craft/storage 5 | /public/ 6 | composer* 7 | /node_modules 8 | /craft/config/redactor 9 | /craft/config/general.php 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuecraft 2 | Building a single page app using Craft CMS as a back end and VueJS as the JS framework. Follow along at https://digitalevangelist.net/blog/tags/single-page-app-with-vuejs-and-craftcms 3 | 4 | This is a repo for building a hybrid SPA with Craft CMS v2. 5 | 6 | 19/02/2020 - should do a revisit as there's a lot of things I'd change with Craft 3. 7 | -------------------------------------------------------------------------------- /craft/config/.htaccess: -------------------------------------------------------------------------------- 1 | deny from all 2 | -------------------------------------------------------------------------------- /craft/config/db.php: -------------------------------------------------------------------------------- 1 | getenv('DB_HOST'), 6 | 'user' => getenv('DB_USER'), 7 | 'password' => getenv('DB_PASS'), 8 | 'database' => getenv('DB_NAME'), 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /craft/config/routes.php: -------------------------------------------------------------------------------- 1 | 'index' 5 | ); 6 | -------------------------------------------------------------------------------- /craft/templates/_layouts/_master.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Craft App 6 | 7 | {% if craft.config.devMode %} 8 | 9 | {% else %} 10 | 11 | {% endif %} 12 | 13 | 14 | 15 | 16 | {% block content %}{% endblock %} 17 | {% if craft.config.devMode %} 18 | 19 | {% else %} 20 | 21 | {% endif %} 22 | 23 | -------------------------------------------------------------------------------- /craft/templates/index.twig: -------------------------------------------------------------------------------- 1 | {% extends '_layouts/_master' %} 2 | 3 | {% block content %} 4 |
5 | {% endblock %} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuecraft", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "scripts": { 8 | "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 9 | "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 10 | "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 11 | "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 12 | } 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "laravel-mix": "^1.4.2" 19 | }, 20 | "dependencies": { 21 | "bootstrap": "^4.0.0-alpha.6", 22 | "vue": "^2.4.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | new Vue({ 5 | el: '#app', 6 | template: '', 7 | components: { App } 8 | }) -------------------------------------------------------------------------------- /src/sass/app.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1stevengrant/vuecraft/dff8598954dec80b95f69c070f29cf3b90218ea4/src/sass/app.scss -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix'); 2 | 3 | /* 4 | |-------------------------------------------------------------------------- 5 | | Mix Asset Management 6 | |-------------------------------------------------------------------------- 7 | | 8 | | Mix provides a clean, fluent API for defining some Webpack build steps 9 | | for your Laravel application. By default, we are compiling the Sass 10 | | file for your application, as well as bundling up your JS files. 11 | | 12 | */ 13 | 14 | mix.setPublicPath('public') 15 | .js('src/js/main.js', 'js/') 16 | .sass('src/sass/app.scss', 'css/') 17 | 18 | // Full API 19 | // mix.js(src, output); 20 | // mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation. 21 | // mix.extract(vendorLibs); 22 | // mix.sass(src, output); 23 | // mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack. 24 | // mix.fastSass('src', output); <-- Alias for mix.standaloneSass(). 25 | // mix.less(src, output); 26 | // mix.stylus(src, output); 27 | // mix.postCss(src, output, [require('postcss-some-plugin')()]); 28 | // mix.browserSync('my-site.dev'); 29 | // mix.combine(files, destination); 30 | // mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation. 31 | // mix.copy(from, to); 32 | // mix.copyDirectory(fromDir, toDir); 33 | // mix.minify(file); 34 | // mix.sourceMaps(); // Enable sourcemaps 35 | // mix.version(); // Enable versioning. 36 | // mix.disableNotifications(); 37 | // mix.setPublicPath('path/to/public'); 38 | // mix.setResourceRoot('prefix/for/resource/locators'); 39 | // mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin. 40 | // mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly. 41 | // mix.then(function () {}) <-- Will be triggered each time Webpack finishes building. 42 | // mix.options({ 43 | // extractVueStyles: false, // Extract .vue component styling to file, rather than inline. 44 | // processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched. 45 | // purifyCss: false, // Remove unused CSS selectors. 46 | // uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin 47 | // postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md 48 | // }); 49 | --------------------------------------------------------------------------------