├── .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 |
2 |
3 |
{{ welcomeMessage }}
4 |
5 |
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 |
--------------------------------------------------------------------------------