nuxt-axios-i18n example add

examples/nuxtjs-additional/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+ root: true,
+ env: {
+ browser: true,
+ node: true,
+ },
+ parserOptions: {
+ parser: 'babel-eslint',
+ },
+ extends: ['eslint:recommended', 'plugin:vue/recommended', 'airbnb-base'],
+ plugins: ['vue'],
+ settings: {
+ 'import/resolver': {
+ webpack: {
+ config: './config/nuxt.config.js',
+ },
+ },
+ },
+ // add your custom rules here
+ rules: {
+ 'max-len': ['error', { code: 80 }],
+ 'import/no-unresolved': 'off',
+ 'no-param-reassign': [
+ 'error',
+ {
+ props: true,
+ ignorePropertyModificationsFor: [
+ 'state', // for vuex state
+ 'acc', // for reduce accumulators
+ 'e', // for e.returnvalue
+ 'config', // for nuxt config
+ ],
+ },
+ ],
+ 'import/no-extraneous-dependencies': [
+ 'error',
+ {
+ optionalDependencies: ['test/setup.js'],
+ },
+ ],
+ 'linebreak-style': ['error', 'windows'],
+ },
+};

examples/nuxtjs-additional/.gitignore

@@ -0,0 +1,11 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist

examples/nuxtjs-additional/.jshintrc

@@ -0,0 +1,3 @@
+{
+ "esversion": 6
+}

examples/nuxtjs-additional/README.md

@@ -0,0 +1,35 @@
+# Vue Styleguidist Nuxt.js advanced example style guide
+
+## Styleguide
+
+How to start locally:
+
+```
+git clone https://github.com/vue-styleguidist/vue-styleguidist.git
+cd vue-styleguidist/examples/nuxtjs-advanced
+npm install
+npm run styleguide
+```
+
+Then open [http:https://localhost:6060](http:https://localhost:6060) in your browser.
+
+## Nuxt.js
+
+### Build Setup
+
+```bash
+# install dependencies
+$ npm install # Yarn will have `packages version mismatch` problem with vue-styleguidist, not recommend
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

examples/nuxtjs-additional/config/nuxt.config.js

@@ -0,0 +1,61 @@
+const autoprefixer = require('autoprefixer');
+const nodeExternals = require('webpack-node-externals');
+const i18n = require('./nuxt.i18n.config.js').default;
+
+module.exports = {
+ srcDir: 'src/',
+ head: {
+ title: 'Nuxt styleguide example',
+ meta: [
+ { charset: 'utf-8' },
+ {
+ name: 'viewport',
+ content: 'width=device-width,initial-scale=1',
+ },
+ {
+ hid: 'description',
+ name: 'description',
+ content: 'Nuxt styleguide example',
+ },
+ ],
+ link: [
+ {
+ rel: 'shortcut icon',
+ type: 'image/x-icon',
+ href: 'favicon.ico',
+ },
+ ],
+ },
+ loading: { color: '#3B8070' },
+ plugins: [],
+ modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', i18n],
+ css: [],
+ build: {
+ extend(config, { isDev, isClient, isServer }) {
+ if (isDev && isClient) {
+ config.module.rules.push({
+ enforce: 'pre',
+ test: /\.(js|vue)$/,
+ loader: 'eslint-loader',
+ exclude: /(node_modules)/,
+ });
+ config.module.rules.push({
+ enforce: 'pre',
+ test: /\.(js)$/,
+ loader: 'jshint-loader',
+ exclude: [/(node_modules)/, /(.nuxt)/],
+ });
+ }
+ if (isServer) {
+ config.externals = [
+ nodeExternals({
+ whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-awesome/],
+ }),
+ ];
+ }
+ },
+ vendor: ['babel-polyfill', 'eventsource-polyfill', 'promise.prototype.finally'],
+ plugins: [],
+ postcss: [autoprefixer()],
+ },
+};

examples/nuxtjs-additional/config/nuxt.i18n.config.js

@@ -0,0 +1,17 @@
+const en = require('../src/assets/i18n/en.json');
+const pl = require('../src/assets/i18n/pl.json');
+
+exports.default = [
+ 'nuxt-i18n',
+ {
+ locales: [{ code: 'en' }, { code: 'pl' }],
+ defaultLocale: 'en',
+ vueI18n: {
+ fallbackLocale: 'en',
+ messages: {
+ en,
+ pl,
+ },
+ },
+ },
+];

examples/nuxtjs-additional/config/styleguide.config.js

@@ -0,0 +1,33 @@
+const { resolve } = require('path');
+const rules = require('vue-webpack-loaders');
+const vueLoaderConfig = require('vue-webpack-loaders/lib/vue-loader.conf');
+
+rules.push({
+ // eslint-disable-next-line
+ test: /vue-awesome[\\\/]components[\\\/]Icon\.vue$/,
+ loader: 'vue-loader',
+ options: vueLoaderConfig,
+});
+
+module.exports = {
+ require: [
+ 'babel-polyfill',
+ 'eventsource-polyfill',
+ 'promise.prototype.finally',
+ './config/styleguide.mock.js',
+ ],
+ components: '../src/components/**/[A-Z]*.vue',
+ webpackConfig: {
+ resolve: {
+ extensions: ['.js', '.json', '.vue', '.ts'],
+ alias: {
+ '~': resolve(__dirname, '..', 'src'),
+ '@': resolve(__dirname, '..', 'src'),
+ },
+ },
+ module: {
+ rules,
+ },
+ },
+ showUsage: true,
+};

examples/nuxtjs-additional/config/styleguide.mock.js

@@ -0,0 +1,119 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import BootstrapVue from 'bootstrap-vue';
+import VueI18n from 'vue-i18n';
+import Axios from 'axios';
+import createStore from '../src/store/index';
+import '../node_modules/bootstrap/dist/css/bootstrap.css';
+
+/*
+ * Load bootstrap
+ */
+
+Vue.use(BootstrapVue);
+
+/*
+ * Create Axios instance with configuration.
+ */
+
+let $axios = Axios.create(); /* jshint ignore:start */
+
+/*
+ * Extend axios to make it similar
+ * to @nuxtjs/axios original plugin
+ */
+/* eslint-disable */ for (let method of [
+ 'request',
+ 'delete',
+ 'get',
+ 'head',
+ 'options',
+ 'post',
+ 'put',
+ 'patch',
+]) {
+ $axios['$' + method] = function() {
+ return $axios[method].apply($axios, arguments).then(res => res && res.data);
+ };
+} /* jshint ignore:end */ /*
+ * Load axios globaly
+ */
+/* eslint-enable */ Object.defineProperty(Vue.prototype, '$axios', {
+ get() {
+ return $axios;
+ },
+ set(val) {
+ $axios = val;
+ },
+ configurable: true,
+});
+
+/*
+ * Load store globaly with axios injection
+ */
+
+Vue.use(Vuex);
+const store = createStore();
+store.$axios = $axios;
+Vue.prototype.$store = store;
+
+/*
+ * Enable access to Vue in window
+ * :/ Dirty hack for VueI18n :/
+ */
+
+window.Vue = Vue;
+
+/*
+ * Language files load
+ */
+
+const en = require('../src/assets/i18n/en.json');
+const pl = require('../src/assets/i18n/pl.json');
+
+const locales = [{ code: 'en' }, { code: 'pl' }];
+
+/*
+ * VueI18n instance initialization
+ */
+
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: { en, pl },
+ fallbackLocale: 'en',
+});
+
+/*
+ * Manualy assign _i18n beacuse VueI18n above 7.3.2 uses it
+ * to inject $i18n.
+ */
+// eslint-disable-next-line
+Vue.prototype._i18n = i18n;
+
+/*
+ * Manualy assign locales to $i18n so we can access them
+ */
+
+Vue.prototype.$i18n.locales = locales;
+
+/*
+ * Mock switchLocalePath function from nuxt-vuei18n plugin
+ * It's not needed since it's dedicated for ssr.
+ */
+// eslint-disable-next-line
+Vue.prototype.switchLocalePath = locale => {
+ // console.log(Vue.prototype.$i18n.locales.find(l => l.code === locale));
+};
+
+/*
+ * Inject click with locale code change function.
+ * Before injecting click function component must have dedicated id.
+ */
+
+window.onload = () => {
+ locales.map(locale =>
+ document.getElementById(`languageChangeTo${locale.code}`).addEventListener('click', () => {
+ Vue.prototype.$i18n.locale = locale.code;
+ })
+ );
+};