Skip to content

Working with Vue in Foundation

  • Used foundation-cli to install foundation

Setup

  • Install vue, vue-loader, vue-style-loader, vue-template-compiler, sass-loader, style-loader, css-loader, typescript, awesome-typescript-loader

gulpfile.babel.js config

  • Configure gulpfile.babel.js - webpack
  • gulp.watch('src/assets/components/**/*').on('all', gulp.series(javascript, browser.reload)) - add to end of file to watch components 
    let webpackConfig = {
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ['vue-style-loader', {
              loader: 'css-loader',
              options: {
                minimize: false,
                sourceMap: false
              }
            },
              {
                loader: 'sass-loader',
                options:
                  {
                    includePaths: ['./src/assets/vue/styles'],
                    data: '@import "./src/assets/vue/styles/app";',
                    sourceMap: false
                  }
              }
            ],
            ts: 'awesome-typescript-loader'
          }
        }
      },
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader?name=images/[name].[ext]'
        ]
      }
    ]
  }
}
  • Have to configure webpackConfig with vue-loader.
  • Update config.yml 
      assets:
    - "src/assets/**/*"
    - "!src/assets/{components,img,js,scss,fonts}/**/*"

Other Notes

  • Created separate style directory for just Vue styles.
    • Allow access to foundation from all components.
    • Easier configuration in webpack.
  • Installed babel-preset-env for always current babel engine.
  • Customize the app.css file in ./src/assets/vue/styles
    • @import ‘~foundation-sites/scss/foundation’;
    • @import ‘~font-awesome/scss/font-awesome’; - Not necessary since already in main config.
    • @import ‘~motion-ui/src/motion-ui’;

Resources

Replacement resources

Notes

Tutorials

Components

Importing vue components - script.ts - template.html

<div class="grid-container">
    <h1>{{msg}}</h1>
    <marvel-proto></marvel-proto>
</div>
* script.ts 
import MarvelProto from './../MarvelProto/MarvelProto.vue'
export default {
    components: {
        MarvelProto,
    },
    data: () => (
        {
            msg: "User List",
        }
    ),
};

Creating new project with vue-cli

  • Setup the proxy
  • In vue.config.js 
      devServer: {
    proxy: 'http://localhost:5000'
  }
  • Setup typescript
    • npm install -D @vue/cli-plugin-typescript
    • vue invoke typescript

General notes while developing with Vue

Updated Resources

  • Vue filters no longer included.
  • Use methods on v-for rather than filter. Call the item as a method
  • Ex:
    • <li v-for=" story in famous(stories) " > 
          methods: {
        famous: (stories) => {
            return stories.filter(  (item) => {

                console.log(item)

                return item.upvotes > 20
            })
        },
        now: function () {
           return Date.now()
        }
    },
  • Ajax requests for Vue
  • axios - Replacement for vue resources http

TypeScript Notes

// tsconfig.json
{
  "compilerOptions": {
    // ... other options omitted
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Vue Components

Child/Parent Communication

  • How to get the parent to update it’s value from the child.
  • Vuejs 2 changed how it is done. .sync has changed.
  • Components
    • Parent - wordpress
    • Child - story
      • props: [story, favorite]
  • On Child
    • button - <button v-show="!isFavorite" @click="setFavorite" class="success button tiny">Favorite</button> - on click, call setFavorite method.
    • method - emit event to favorite, send the current story as the object. 
          private setFavorite() {
        this.$emit("favorite", this.story);
    }
  • On Parent
    • in Template - v-on:favorite="updateFavorite(story) - event is favorite, method is updateFavorite and pass in the story. 
          <story v-for="story in stories"
            :key="story.id"
            :story="story"
            :favorite="favorite"
    v-on:favorite="updateFavorite(story)"></story>
  • method to update the favorite the current story. 
        public updateFavorite(story) {
        this.favorite = story;
    }
  • Favorite is now pointing to the current story. Only one favorite.

Create module for npm

VueRouter

  • Getting Router hooks to work in vue-class-component.
  • Fix issue with relative css files not being loaded. Cause page not to reload.
  • Fix Issue with TypeScript and router.push - Argument type `{name: string} is not assignable to parameter RawLocation.

Vuex

Options for admin/personal admin sites

Components

Last update: April 13, 2020 16:50:19